reactjs - 如何在使用 map() 函数时将 this.props 从父组件传递给子组件而不会未定义？

Question

我有两个组成部分：<Content />作为父母和<Curriculum />作为孩子。

对于<Content />组件，在从 Redux 存储中获取状态后，我将状态映射到 props 并将这些 props 传递给 map() 函数。

// import...

class Content extends Component {
  render() {
    return (
      <div>
        {this.props.englishEntrances.map((english, i) => {
          //Work
          console.log(`CONTENT ${i}`);
          console.log(this.props.curriculums);
          console.log(this.props.curriculums[i]);
          console.log(english);

          return (
            <Curriculum
              key={i}
              level={i + 1}
              titleColor={colorLevels[i].title}
              contentColor={colorLevels[i].content}

              //Bug here
              curriculum={this.props.curriculums[i]}
              englishEntrance={english}
            />
          );
        })}
      </div>
    );
  }
}

//const mapStateToProps...

export default connect(mapStateToProps, null)(Content);

在map()函数内部，有两个对象数组：curriculums和englishEntrances。

我尝试打印this.props.curriculums[i]和english，控制台会正常出现这些值。

问题是：当我尝试在return语句中传递两个值时，在<Curriculum />组件中，只有有值english，但是.this.props.curriculumundefined

任何人都知道如何在this.props没有得到的情况下传递价值undefined？

标签： reactjsreact-redux

Answer 1

我忘记render()了 React 组件生命周期中的函数可以在初始化构造函数后立即渲染。在<Curriculum /> 组件中， 的值this.props.curriculum将undefined在这个阶段，

因此，我必须在从商店获取状态之前和之后处理该组件中的事件。