props.items.map不是使用React的函数

Question

I am using React as a beginner, and I looked up the error I was getting and most people say you cannot use map with an object, it must be an array. But I am getting back the following data for my props.items when put in console.log:

[{
  ItemKey: 82521,
  ISBN: "158344422X",
  Title: "Butterflies And Moths",
  Publisher: "Benchmark Education",
  Illustrator: " "
}, {
  ItemKey: 85938,
  ISBN: "9780452274426",
  Title: "In the Time of the Butterflies",
  Publisher: "Penguin Plume",
  Illustrator: " "
}]

So it is returning an array. But I still get the map is not a function error. Here is my code:

function ItemGrid (props){
    return (
        <ul className='items-list'>
            {props.items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

Does anyone see anything unusual about the code I wrote or the object getting returned?

EDIT: Here is how I am getting the data:

module.exports = {
    fetchItems: function(){
        var encodedURI = window.encodeURI('http://localhost:8081/items?Title=butterflies', { crossdomain: true });
        return axios.get(encodedURI).then(function(response){
            return response.data;
        });
    }
}

And I am passing data to ItemGrid through:

componentDidMount(){
    api.fetchItems().then(function(items){
        this.setState(function(){
            return {
                items: items
            }
        })
    }.bind(this));
}

render() {
    return (<div>
        <ItemGrid items={this.state.items} />
    </div>);
}

I am also having trouble getting the li items to show up once the data is present:

<ul className='items-list'>

            {items && items.map(function (item, index) {
                console.log(item);
                <li key={index} className='items-list-item'>
                    item.Title
                </li>
            })}
        </ul>

Answer 1

The render function can and will be called several times, often without any data the first time through.

So you need to check if your data is present before you try and iterate over it with the map() function.

if props.items is not present you can return something simple like null or even "Loading", and the next time around (when the data is there) it will work as expected.

So your new code could be this (only rendering if props.items is defined):

function ItemGrid (props){
    return (
        <ul className='items-list'>
            {props.items && props.items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

Answer 2

The correct solution depends on how the data is being retrieved. If it's a simple JS array within your script, the data should be available when the component is mounted.

 var data = [{ ItemKey: 82521, ISBN: "158344422X", Title: "Butterflies And Moths", Publisher: "Benchmark Education", Illustrator: " " }, { ItemKey: 85938, ISBN: "9780452274426", Title: "In the Time of the Butterflies", Publisher: "Penguin Plume", Illustrator: " " }]; function ItemGrid(props) { var items = props.items; return ( <ul className='items-list'> { items.map(function(item, index) { return (<li key={item.ItemKey} className="items-list-item">{item.Title}</li>) }) } </ul> ) } ReactDOM.render(<ItemGrid items={data} />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

On the other hand, if you're retrieving the data from an asynchronous request it may not be available when the component is mounted and you'll need to handle the case when props.items is undefined/empty/null. In the example below we wrap the <ItemsGrid/> component in a <Parent/> component which passes the items as a prop to <ItemsGrid/> . Initially the items is null , and after 3 seconds it changes to an array. This simulates an asynchronous data source.

While items is null we return a list showing Loading... , and when items changes to a valid value we display the items.

 class Parent extends React.Component { constructor(props) { super(props); this.state = { data: null }; window.setTimeout(function(){ this.setState({ data: [{ ItemKey: 82521, ISBN: "158344422X", Title: "Butterflies And Moths", Publisher: "Benchmark Education", Illustrator: " " }, { ItemKey: 85938, ISBN: "9780452274426", Title: "In the Time of the Butterflies", Publisher: "Penguin Plume", Illustrator: " " }] }) }.bind(this), 3000); } render() { return ( <ItemGrid items={this.state.data} /> ) } } function ItemGrid(props) { var items = props.items; if (!items) { return ( <ul> <li>Loading...</li> </ul> ); } return ( <ul className='items-list'> { items && items.map(function(item, index) { return (<li key={item.ItemKey} className="items-list-item">{item.Title}</li>) }) } </ul> ) } ReactDOM.render(<Parent />, document.getElementById("app")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

If you are using redux, this is a very easy fix, but if you aren't:

What is happening is when the component mounts, it immediately searches for props.items , but it is null . You have an asynchronous event that eventually gets the data, but it's not doing it fast enough.

The easiest way to fix this is to control what your .map is accepting by using a conditional statement before your component attempts to render content.

function ItemGrid (props){
    const items = props.items ? props.items : []
    return (
        <ul className='items-list'>
            {items.map(function(item, index){
                <li key={item.Title} className="items-list-item">
                </li>
            })}
        </ul>
    )
}

Check to see if props.items is null or not. If it is, render an empty array so it doesn't throw an error. If it does exist, it'll use props.items .

Please keep in mind that this will only work if a rerender attempt is made after you receive the array of data. I would personally uses promises and state to control rendering, because that will work in any situation. It's a much more involved solution, but it's something you should know like the back of your hand as a React developer. Keep us updated.