出现反应状态，但仅第一个阵列可访问

Question

I need to loop through an array that is nested within an array in my React State. I see the state is populated with both arrays in Dev Tools, also, when I loop through the parent array with Object.keys(this.state.products).map I get all of the values. The issue is when I try to loop over the child array, or pull any value from the child array, such as this.state.products[0][3] I get Undefined errors.

Whats more, is when I console.log this.state.products[0][3] in ComponenetDidUpdate I get the value, so it's like React is setting the state but not all the way?

 const { Component } = React; class App extends Component { state = { products: [] }; componentDidMount() { this.apiSearch(); } apiSearch = () => { // api call is made here const API = `http://localhost:5000/products`; fetch(API) // api response log // .then(response => console.log(response)) .then(response => response.json()) .then(data => { this.setState({ products: data }, () => this.setState({ products: data }) ); }) .catch(err => { console.log(err); }); }; render() { return ( <div className="App"> {<div>{typeof this.state.products[0]}</div>} {/* issue is here !!!! */} {<div>{typeof this.state.products[0][3]}</div>} {/* issue is here !!!! */} {this.state.products.forEach(function(element) { console.log(element); })} <br></br> Listings: {Object.keys(this.state.products).map((keyName, i) => ( <li className="listingItem_Parent" key={i}> <span className="listingItem"> {i} Name: {this.state.products[keyName]} </span> </li> ))} <br></br> </div> ); } } ReactDOM.render(<App/>, document.getElementById("root")); 

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

I need to iterate through the child array in "products" which is set in state and generate a nice list of them like with map in the first array.

Answer 1

Your component's render is called before the fetch occurs. At that point, your state just contains { products: [] } , so naturally this.state.products[0][3] fails because this.state.products[0] is undefined at that point. You need to either initialize your state such that this.state.products[0][3] is meaningful, or update render so that it doesn't fail when there is nothing in this.state.products .

Answer 2

There are a fair number of possibilities. First, check the console output, it is likely you're getting a warning explaining what's going on.

First, check that the state is really an array and not an error or some other object.

Secondly, you are explicitly checking something out of bounds in the initial state (the other answer just posted suggested this).

Third, make sure you use an key/ID when iterating over the list, it might not work without it (it should generate a warning).

//something like this
{ this.state.products.map( p => {
    return (<span key={p.id}>{p.name /*whatever*/}</span>) 
} )

Basically make sure that render method works with any and all data, right now there are no checks in place to validate the source so you might have something unexpected crashing your application. The hard coded index out of bounds is highly suspect.

Answer 3

componentDidMount() runs after the first render. So, the fetch is not even done by the time the first return is executed, which means this.state.products is still an empty array. And you are performing actions on an empty array at this moment. Which is why this.state.products[0][3] will fail.

At this moment:

this.state.products =[]
this.state.products[0] = undefined
this.state.products[0][3] -> error since you are checking for [3] of undefined. 

You need to check if the array is empty and then perform actions based only when it's not.