Question

我正在使用map和Table，但是我无法使用它，因为这是我的第一个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);
}

以上代码来自

的子组件

在App中我有

this.setState({itemList: itemList});

因此，每当我向数组添加内容时，我都会调用setState，以便重新呈现此子组件。但数据永远不会出现。即使我把

也没有做任何其他事情

<h1>bhavya</h1>

取代

{item}

编辑：

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

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

编辑2：

我的数组在子组件中是空的！ :(一旦我在子组件中输入渲染，我就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

您正在itemList中设置App状态，并在itemList中从状态呈现AddList - 一个完全不同的组件。

这不是国家的运作方式。只有一个组件拥有任何特定的状态。如果您正在对itemList组件中的App状态进行更新，则App需要将itemList向下传递给子组件，并且子组件需要呈现来自props - 不是州。组件之间不共享状态。它由一个组件拥有，然后传递下来通过道具进行渲染。

以下是一个例子：

App的渲染方法体：

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

上面的行将App的itemList状态作为道具传递给AddList组件。

AddList的渲染方法体（注意使用道具）：

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

这里 - AddList呈现作为prop传递的itemList数组。

Answer 2

我相信这段代码：

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

应该更像这样：

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

React中的

setState不保证是同步的;也就是说，你不能指望在setState返回后立即设置的状态对象，这就是为什么setState有一个可选的回调参数，这样你就可以得到通知所有的州改变都已生效。

子组件重新渲染，但数据永远不会出现

编辑：

2 个答案: