javascript - 组件已更新但没有视觉变化

Question

我是 React 的新手，我正在努力解决这个问题:

HTML

<div id="root"></div>

JS

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: props.title };
  }

  render() {
    return ()<div>{this.state.title}</div>);
  }
}

class TestApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      children: [
        <Child title='a' />,
        <Child title='b' />
      ]};
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('[componentDidUpdate]');
    console.log('prevChildren: ' + prevState.children.map(c => c.props.title).join(', '));
    console.log('children: ' + this.state.children.map(c => c.props.title).join(', '));
  }

  handleOnClick = () => {
    console.log('[handleOnClick]');

    this.setState((prevState) => {
      return {
        children: [
          <Child title='c' />,
          <Child title='d' />
        ]
      };
    });
  };

  render() {
    console.log('[render]');

    return (
      <div>
        <div>TEST</div>
        {this.state.children}
        <button onClick={this.handleOnClick}>CHANGE</button>
      </div>
      )
  }
}

ReactDOM.render(<TestApp />, document.getElementById('root'));

代码笔:https://codepen.io/robloche/pen/xmGMBy

当我点击按钮时控制台中发生的事情是:

[handleOnClick]
[render]
[componentDidUpdate]
prevChildren: a, b
children: c, d

这对我来说看起来不错，但不知何故，a 和 b 仍然显示，而不是 c 和 d...我错过了什么？

Answer 1

因为你有一个 Child 的数组元素，那么 React 无法区分它们何时实际被更新/替换为新元素。

添加一个独特的 key每个 Child它会起作用，例如

<Child key='a' title='a'/> ,
<Child key='b' title='b'/> ,
等

注意!在处理组件数组时，然后是 key属性是强制性的，虽然在这种情况下它也会有所帮助，但您当前的方法并不是最优的。

与其在状态更改时创建全新的组件，不如只存储它们的值(在本例中为 title)，然后拥有 render()方法处理。

以下是伪伪代码，因为我只添加了相关部分来展示它是如何工作的。

constructor() {
  this.state = {
    children: ['a', 'b']
  }
}

onClick() {
  this.setState({
    children: ['c', 'd']
  });
}

render() {
  return (
    <>
      {this.state.children.map(title => <Child key={title} title={title}/>)}
    </>
  );
}