Question

我正在尝试使用componentDidUpdate动态呈现组件的集合。这是我的情况：

var index = 0;

class myComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      componentList: [<ComponentToRender key={index} id={index} />]
    };

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

  componentDidUpdate = () => {
    var container = document.getElementById("container");
    this.state.componentList.length !== 0
      ? ReactDOM.render(this.state.componentList, container)
      : ReactDOM.unmountComponentAtNode(container);
  };

  addHandler = () => {
    var array = this.state.componentList;
    index++;
    array.push(<ComponentToRender key={index} id={index} />);
    this.setState = {
      componentList: array
    };
  };

  render() {
    return (
      <div id="Wrapper">
        <button id="addPeriod" onClick={this.addHandler}>
          Add Component
        </button>
        <div id="container" />
      </div>
    );
  }
}

问题是componentDidUpdate只能工作一次，但是每次组件状态更改时它都应该工作。预先谢谢你。

Answer 1

这不是使用反应的方法。使用Products(DesignSetId, BatchNumber, Quantity, DeliveryCnt)，您将创建一个全新的组件树。通常，您只需要执行一次操作即可最初呈现您的应用程序。其他所有内容都将通过组件的ReactDOM.render()函数来呈现。如果您使用render()进行操作，那么实际上每次您更新数据并从头开始重新创建它时，基本上都会丢弃已呈现的所有内容，而实际上您只需要在某个位置添加一个节点即可。

在组件状态下实际存储的内容应该是纯数据，而不是组件。然后使用此数据在ReactDOM.render()函数中呈现组件。

有效用例示例：

render()

此外，您不应像使用class MyComponent extends Component{ state = { periods: [] }; handleAddPeriod = () => { this.setState(oldState => ({ periods: [ ...oldState.periods, {/*new period data here*/} ], }); }; render() { return ( <div id="Wrapper"> <button id="addPeriod" onClick={this.handleAddPeriod}> Add Component </button> <div id="container"> {periods.map((period, index) => ( <ComponentToRender id={index} key={index}> {/* render period data here */} </ComponentToRender> ))} </div> </div> ); } } }那样使用全局变量。如果您的数据在使用应用程序期间发生变化，则该指示器应为组件状态。

Answer 2

尝试

addHandler = () =>{
    var array = this.state.componentList.slice();
    index++;
    array.push(<ComponentToRender key={index} id={index}/>);
    this.setState=({
        componentList: array
    });
}

如果可行，这是状态保持不变的Array引用的问题。即使您已添加到数组中，也正在调用setState时，它仍然会看到相同的引用，因为push不会创建新的数组。如果您还实现shouldComponentUpdate并检查其中的新状态的数组长度以查看其是否更改，则可能可以使用相同的数组。

ComponentDidUpdate不起作用

2 个答案: