Question

我遇到了更新部分状态的问题，该状态是传递给组件子级的列表。

我将一个列表传递给一个孩子，但后来无法更新该列表并让孩子反映新状态;

<ItemsClass items={this.state.items1} />

当我更改this.state.items1的值时，该组件不会使用新值进行渲染。

this.setState({items1: []}); // this has no effect

但是，如果我更改现有的数组（不替换新的新数组），组件将按照我的意愿呈现;

this.setState(state => { clearArray(state.items1); return state; });

这意味着状态更新功能不是纯粹的，React说它应该是。

HTML;

<div id='app'></div>

js;

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

    this.state = {items: props.items};
  }

  render() {
    var items = this.state.items.map(it => <div key={it.id}>{it.text}</div>);
    return(
      <div>{items}</div>
    );
  }
}

function ItemsFunction(props) {
  var items = props.items.map(it => <div key={it.id}>{it.text}</div>);
    return(
      <div>{items}</div>
    );
}

class App extends React.Component {
  constructor(props){
    super(props);
    var items = [{id:1, text: 'item 1'}, {id: 2, text: 'item 2'}];

    this.state = {
      items1: items.slice(),
      items2: items.slice(),
      items3: items.slice()
    };
    this.clearLists = this.clearLists.bind(this);
  }

  clearLists() {
    // for items1 and items2, clear the lists by assigning new empty arrays (pure).
    this.setState({items1: [], items2: []});

    // for items3, change the already existing array (non-pure).
    this.setState(state => {
      while (state.items3.length) {
        state.items3.pop();
      }
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.clearLists}>Clear all lists</button>
        <h2>Items rendered by class, set list to new empty array</h2>
        <ItemsClass items={this.state.items1} />
        <h2>Items rendered by class, empty the already existing array</h2>
        <ItemsClass items={this.state.items3} />
        <h2>Items rendered by function</h2>
        <ItemsFunction items={this.state.items2} />
      </div>
      );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

在codepen上试用。

似乎ItemsClass即使在父级中<ItemsClass items={this.state.items1}/>和this.state.items1创建时也不会更新。

这是预期的行为吗？如何从父级更新ItemsClass子级中的状态？我错过了什么？这种行为似乎很容易出错，因为很容易认为孩子应该遵循新的状态，就像孩子被创造时传递的那样。

Answer 1

您正在将ItemsClass的道具复制到组件初始化时的状态 - 当道具更改时您不会重置状态，因此组件的更新不会显示。引用docs：

请注意这种模式，因为状态不会与任何道具更新保持同步。你没有将道具同步到州，而是经常想要提升状态。

如果你的组件必须在道具改变时做某事，你可以使用componentWillReceieveProps生命周期钩子这样做（注意，当组件最初安装时，它不会运行，仅在后续道具更新时）

那就是说，你没有理由在这里复制道具（老实说，一般来说很少有理由这样做） - 只需直接使用道具，就像你在使用ItemsFunction一样，一切都将保持同步：

class ItemsClass extends React.Component {
  render() {
    var items = this.props.items.map(it => <div key={it.id}>{it.text}</div>);
    return(
      <div>{items}</div>
    );
  }
}

以下是您的Codepen的工作版本：http://codepen.io/anon/pen/JNzBPV

与状态列表一起反应，如何设置新状态？

1 个答案: