Question

我有一个MainComponent，它有几个带不同文本的按钮。按下按钮第一次点击它们，它将创建一个新的窗口组件。有一个标志阻止它创建更多的Windows，除非这个标志由于某种原因而改变（我不需要在这里包含它）。假设代码可以创建多个Window组件并将其添加到列表中并成功呈现它，但是如果模式被更改，再次单击按钮将不会创建更多组件。

我通过创建状态数组和状态标志来渲染这个对象数组，并在每次创建新数组时向该数组添加新的Window组件并渲染该数组。

我的问题是，当新的Window创建标志关闭（flagObj！== null）时，我单击任何向当前窗口传递不同值的按钮，我希望值更新。但价值观不会更新。每个window.body prop访问this.state.currentWindowData，这是我每次在这种模式下点击一个按钮时所改变的，并且使用开发工具我看到状态会相应地改变。

由于某种原因，它不会传播到列表中的子窗口组件。有什么问题？

MainComponent
constructor(props) {
    super(props)
    this.state = {renderWindow: false, windowArray: []}
    this.manage= this.manage.bind(this)
}

openWindow() {
   const newWindow = <Window key={shortid.generate()} body={this.state.currentWindowData}/>;
    this.setState({
        renderWindow: true, 
        windowArray: [newWindow, ...this.state.windowArray]
     })
}

modify(val) {
    this.setState({currentWindowData: val});
}

manageWindow(val) {
    if (flagObj === null) {
        this.setState({currentWindowData: val}, () => {
            this.openWindow();
        });
    } else {    
        this.modifyWindow();
    }
}

render() {
    return (
      <div>
        <button onClick = {() => this.manage("text1")}/>
        <button onClick = {() => this.manage("text2")}/>
        <button onClick = {() => this.manage("text3")}/>
        {this.state.renderWindow ? this.state.windowArray : null}
      </div>
    )
}

这是窗口组件。我渲染this.props.body（传入的状态数据）并执行this.props.bodyData（从componentWillReceiveProps设置），但都不更新。

Window
constructor(props) {
    super(props);
}

componentWillReceiveProps(nextProps) {
    this.setState({bodyData: nextProps.body});
}

render() {
    return (
        <div>
            {this.props.body}   
            {this.state.bodyData}
        </div> 
    );
}

React：如何在支柱更改时重新渲染数组中的子组件？

0 个答案: