如何在 React 中多次将数据从父组件传递到子组件？答案

【问题标题】：How to pass data from parent to child component multiple times in React?如何在 React 中多次将数据从父组件传递到子组件？
【发布时间】：2019-01-09 04:01:51
【问题描述】：

我正在从父组件中的数组加载数据并将其多次传递给子组件。我注意到数组中的第一个项目被发送给孩子，但之后其余的组件没有被孩子传递/接收。这是我用来访问数组的代码示例：

{(() => {
switch(data.questions[this.state.index].question_type) {
    case "RadioQuestion":   console.log(JSON.stringify(this.state.radioQuestions[this.state.index]));
                            return <RadioQuestion
                                      radioQuestion = { this.state.radioQuestions[this.state.index] }
                                      handleRadio = { this.handleRadio } />;
    case "TextQuestion":   console.log(JSON.stringify(this.state.textQuestions[this.state.index]));
                           return <TextQuestion
                                      textQuestion = { this.state.textQuestions[this.state.index] }
                                      handleText = { this.handleText } />;
    case "FileUpload": return <FileUpload index = { this.state.index } />;
    default: return <h2>Unknown Question Format</h2>
}
})()}

我已记录 (console.log()) 来自上方各个数组的数据，正确的项目正在使用索引从数组中加载。

在各自的子元素中，添加第一个元素后状态似乎没有更新：

// Radio Component
constructor(props) {
    super(props);

    this.state = {
        radioQuestion: this.props.radioQuestion
    };

    this.handleRadioText = this.handleRadioText.bind(this);
    this.handleRadioSelect = this.handleRadioSelect.bind(this);
}

// Text Component
constructor(props) {
    super(props);

    this.state = {
        textQuestion: this.props.textQuestion
    };

    this.handleTextChange = this.handleTextChange.bind(this);
}

我有什么遗漏或做错了吗？非常感谢您的反馈，谢谢。

【问题讨论】：

嗨@Mark20 我检查了你的沙箱codesandbox.io/s/4x5x6oo054，能帮我理解你的问题吗？我不清楚
@PraveenRaoChavan.G 解决了谢谢，提供一些帮助

标签： reactjs react-native ecmascript-6

【解决方案1】：

React 不知道你的数组因为它是不可变的而被改变了。您可以做的是创建另一个数组并向其添加新值并将其传递给子组件。由于这不包含完整的代码，我将展示一个示例如何做到这一点

 var newArray = this.state.arr.slice();    
 newArray.push("new value");   
 this.setState({arr:newArray})

【讨论】：

我没有更改我的数组，我只是将 index = 0 处的数据传递给子组件，然后将 index = 1...array.length 处的数据传递给子组件，但只出现第一个元素，其余的是被忽略，但是当我记录 data[index] 时，我得到了正确的输出。它只是在第一个条目之后才传递数据，而不是发送到子组件。
console.log(JSON.stringify(this.state.radioQuestions[this.state.index])); 这能正常工作吗？
是的，正如我在问题中提到的，它可以正常工作，这里是沙箱：codesandbox.io/s/4x5x6oo054

【解决方案2】：

If you have requirement to pass data at index = 0 to array.length then you can use the map function to render the child component till the array length

{(() => { array.map((a, index) => {
  switch(data.questions[this.state.index].question_type) {
    case "RadioQuestion":   
      console.log(JSON.stringify(this.state.radioQuestions[index]));
      return <RadioQuestion 
                radioQuestion={ this.state.radioQuestions[index] }
                handleRadio = { this.handleRadio } />;
    case "TextQuestion":   
      console.log(JSON.stringify(this.state.textQuestions[index]));
      return <TextQuestion
                textQuestion = { this.state.textQuestions[index] }
                handleText = { this.handleText } />;
    case "FileUpload": return <FileUpload index={ index } />;
    default: return <h2>Unknown Question Format</h2>
 }
})})()}

【讨论】：