javascript - 子组件重新渲染但数据从未出现

Question

我正在使用 map 和表格，但是我无法让它工作，因为这是我的第一个 ReactJS 应用程序。

这是我正在做的事情:

        <table className="table table-striped">
            <tbody>
                {this.state.itemList.map(this.addMemberRow)}
            </tbody>
        </table>

这是我的 addMemberRow 函数，我不确定它是否正确!

addMemberRow(item, i) {
    return(
        <tr key={i}>    
            <td> {item} </td>
        </tr>
    );
}

这是我的构造函数

constructor(props) {
        super(props);
        this.state = {
            itemList: [],
        };
    this.addMemberRow = this.addMemberRow.bind(this);
    this.openAll = this.openAll.bind(this);
}

上面的代码来自

的子组件

在我的应用程序中

this.setState({itemList: itemList});

因此，每当我向数组添加某些内容时，我都会调用 setState 以便该子组件重新呈现。但数据从未出现。即使我放了

<h1>bhavya</h1> 

代替

{项目}

编辑:

onUpdate(item){
    itemList.push(item);
    this.setState({itemList: itemList}, () => {
        alert(that.state.itemList.length);
    });
}

这是我设置状态的地方。我每次都会收到更新长度的警报。

编辑 2:

子组件中我的数组为空! :( 当我在子组件中输入 render 时，我就执行了 console.dir(this.state.itemList) 。它在控制台中没有显示任何内容，但在浏览器控制台中它显示数组为空! :(

我传递了 itemList

<AddList itemList={this.state.itemList}/>

我也有

App.defaultProps = {
    itemList: []
};

和

constructor(props) {
  super(props);
  this.state = {
      itemList: [],
  };
  this.onUpdate = this.onUpdate.bind(this);     
}

Answer 1

您正在 App 中设置 itemList 状态，并从 AddList 中的状态渲染 itemList - 完全是不同的组件。

这不是国家的运作方式。只有一个组件拥有任何特定状态。如果您要对 App 组件中的 itemList 状态进行更新，App 需要向下传递 itemList到子组件，并且子组件需要从 props 渲染——而不是状态。状态不在组件之间共享。它由一个组件拥有，然后通过 props 向下传递以进行渲染。

这是一个例子:

应用程序的渲染方法主体:

return <AddList itemList={this.state.itemList} />

上面的代码行将 App 的 itemList 状态作为 prop 传递给 AddList 组件。

AddList 的渲染方法主体(注意 props 的使用):

render() {
    var itemList = this.props.itemList;
    return (
        <table className="table table-striped">
            <tbody>
                {itemList && itemList.map(this.addMemberRow)}
            </tbody>
        </table>
    );
}

此处 - AddList 呈现作为 prop 传递下来的 itemList 数组。