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>
    )
}

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.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3fd03-2c4b5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3fd03-2c4b5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?