You cannot fully traverse an array using map in React.

use map to traverse the array to find that it cannot traverse to the last element of the array. If the array is empty, the map function does not execute.

render () {

    console.log(this.props.items);
    var Items=this.props.items.map((i)=>{
        return <RecipeItem key={i} id={i} RemoveId={this.handleRemoveId.bind(this)} />
    });
    console.log(Items);
    return (
        <div id="itemcontainer">
            {Items}
        </div>
    )
}

Javascript
Mar.07,2021

should be the element that the parent component adds to items later. The data of console.log is not necessarily the data at execution time. You can take a look at 

render() {
    return (
        <div id='itemcontainer'>
            {
                this.props.items.length>0 && this.props.items.map((i)=>{
                   return( <RecipeItem key={i} id={i} RemoveId={this.handleRemoveId.bind(this)}/>)
               }
        </div>
    )
}

has been resolved. Later, after careful debugging, it was found that it was because the this.props.items array had elements, but the length was 0. 0. Description of the link with this question

I have tried it myself. Chrome is a debugging tool that gets the current object content when you click on it, not when you print it, so what is printed in console is more accurate is the summary information of the object (that is, the one that can be clicked to expand). For example, [] and (3) [{.}, {.}, {.}] in the above figure represent 0 and 3.

respectively in the array.

Previous: Installation of Node.js memory leak Analysis tool

Next: How to get the data submitted by ajax in Laravel?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu