从props访问数组返回未定义

问题描述

在App.js中，我有一个传递一些道具的组件:

In App.js I have a component into which I pass some props:

<Populated
      addressParts={this.state.info}
 />

this.state.info是包含其他对象的对象:

this.state.info is an object which contains other objects:

title: 'blahblahblah'
details: Array(3)

...等等...

details具有以下字段:

name: 'this is a question'
levelOfDifficulty: 100000

...等等...

我的代码如下:

import React from 'react'

class Populated extends React.Component {

  render() {
    return(
      <h1>{this.props.addressParts.title}</h1>
    )
  }
}

export default Populated

但是，即使我尝试console.log this.props.addressParts.details [0] .name，我也会收到以下错误消息:

However, even if I try to console.log this.props.addressParts.details[0].name, I get the following error:

TypeError: undefined is not an object (evaluating 'this.props.addressParts.details[0]')

我在这里做错了什么?我是否需要以某种方式将道具映射到初始状态?预先感谢.

What am I doing wrong here? Do I need to map the props to an initial state somehow? Thanks in advance.

推荐答案

您没有在第一个渲染调用中提供道具，因为您是在异步获取数据后设置状态的.

You are not providing the props in the first render call, because you are setting the state after you asynchronously fetching the data.

您可以在Populated内进行条件渲染.组件或App组件内部.

You could do a conditional rendering, either inside the Populated component or inside App component.

这是您的代码的运行摘要，请注意，必须将info初始化为null，这样我所做的当前条件才能起作用.您也可以采用其他方式和其他条件来做到这一点，这只是其中之一.

Here is a running snippet with your code, note that you must initiate the info to null so the current condition i did will work. you can do it in other ways and other conditions as well, this is just one of them.

class Populated extends React.Component {

  render() {
    const { addressParts } = this.props || {}; // just in case you want do defualt to an empty object
    return (
      <div>
        <h1>{addressParts.title}</h1>
        <h2>{addressParts.details.name}</h2>
        <h3>{addressParts.details.levelOfDifficulty}</h3>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // you must initilize info to null so the current condition will work
      info: null
    }
  }

  componentDidMount() {
    // just mimic an async fetch here
    setTimeout(() => {
      this.setState({
        info: {
          title: 'im here',
          details: {
            name: 'this is a question',
            levelOfDifficulty: 100000
          }
        }
      })
    }, 1200);
  }

  render() {
    const { info } = this.state;
    return (
      <div>
        {
          info ?
            <Populated addressParts={this.state.info} /> :
            <div>Loading data...</div>
        }
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<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="root"></div>

这篇关于从props访问数组返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！