从数组映射时，React 子组件不会重新渲染

Question

我正在根据用户输入按需加载一些反应组件（以及其他信息）。
要渲染的组件保存在一个数组中，渲染方法使用array.map来包含组件。

问题是，如果我触发主应用程序组件的forceUpdate() ，映射的组件将不会更新。

代码示例： https://codesandbox.io/s/react-components-map-from-array-ekfb7

Answer 1

为了在 React 中更新，您必须将数据放入 state 然后setState 。

setState()计划对组件的 state object 进行更新。 当 state 更改时，组件通过重新渲染进行响应，这意味着使用新的 state 更新屏幕。

import React from "react";
import "./styles.css";

class TestComponent extends React.Component {
  render() {
    return <p>{Date.now()}</p>;
  }
}

export class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comps: [<TestComponent />],
    }
  }

  add = () => {
    this.setState({ comps: this.state.comps.concat(<TestComponent />) })
  }

  render() {
    return (
      <div className="App">
        <h1>Components map example</h1>
        <p></p>
        <h2>Static TestComponent (ok):</h2>
        <TestComponent />

        <h2>TestComponents mapped from an array (not ok):</h2>
        {
          this.state.comps.map((comp, id) => {
            return <div key={id}>{comp}</div>;
          })
        }

        <h2>All should update when the App component renders</h2>
        <p>
          <button onClick={this.add}>Add TestComponent</button>
        </p>
      </div>
    );
  }
}

Answer 2

日期没有更新，因为您正在add function 中创建组件的实例，从那时起您将引用该实例而不让 react 管理更新。

这就是为什么将组件实例存储在 state 或其他变量中是一种反模式。

问题的演示

下面我创建了一个工作示例，仍然使用forceUpdate来证明问题所在。

请注意，我没有将组件放入 state 中，而是将其推入数组以增加其长度。 然后 React 可以正确管理更新。

 class TestComponent extends React.Component { render() { return <p>{Date.now()}</p>; } } class App extends React.Component { constructor(props) { super(props); this.comps = [1]; } add() { this.comps.push(1); this.forceUpdate(); } render() { return ( <div className="App"> <h1>Components map example</h1> <p></p> <h2>Static TestComponent (ok):</h2> <TestComponent /> <h2>TestComponents mapped from an array (not ok):</h2> {this.comps.map((comp, id) => { return <div key={id}><TestComponent /></div>; })} <h2>All should update when the App component renders</h2> <p> <button onClick={() => this.add()}>Add TestComponent</button> <button onClick={() => this.forceUpdate()}>forceUpdate App</button> </p> </div> ); } } ReactDOM.render(<App/>,document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

这仍然是一个不太理想的解决方案。 但它确实表明了问题所在。

更好的解决方案

如果您需要预先了解更多关于每个组件实例的信息，您可以使数组更复杂。

我还建议使用 state 来存储comps数组，并完全删除forceUpdate 。

 class TestComponent extends React.Component { render() { return <p>{Date.now()} {this.props.a} {this.props.b}</p>; } } class App extends React.Component { constructor(props) { super(props); this.state = { comps: [{ a: 'a', b: 'b' }] } } add = () => { // add your custom props here this.setState(prev => ({comps: [...prev.comps, { a: 'c', b: 'd' } ]})); } render() { return ( <div className="App"> <h1>Components map example</h1> <p></p> <h2>Static TestComponent (ok):</h2> <TestComponent /> <h2>TestComponents mapped from an array (not ok):</h2> {this.state.comps.map((compProps, id) => { return <div key={id}><TestComponent {...compProps} /></div>; })} <h2>All should update when the App component renders</h2> <p> <button onClick={() => this.add()}>Add TestComponent</button> </p> </div> ); } } ReactDOM.render(<App/>,document.getElementById('root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

现在请注意， map回调中的每个组件都可以根据您的逻辑拥有自己独特的一组道具。 但是应该重新渲染的部分会正确地完成。