Question

在父组件中，我从服务器接收数据，然后将此数据映射为jsx格式。在此映射内部，我有一个子组件，并尝试将值从父状态传递给子状态作为属性，但是，当我更新此值的状态时，不会执行子项的渲染功能。

预期的行为：作为用户，我看到一个项目列表。如果我单击某个项目，则该项目应变为选中状态。

wxpython

Answer 1

我看到几个问题。

在toggleSelection中，您没有对mapItems的结果做任何事情。如果仅从状态中删除mappedItems，而只是在render方法中调用mapItems，则可以避免这种错误。

另一个问题是您要传递this.state.clickedTripId作为ticked属性。我认为您打算传递更像this.state.clickedTripId === trip.id的东西。

Answer 2

正如Ryan所说，问题在于mappedItems在单击toggleSelection时没有更新。从代码mapItems显而易见，它以jsx格式返回数据。要对其进行更新，我必须调用this.setState({mappedItems: this.mapItems(this.state.items)})，这意味着我调用mapItems，然后将结果分配给该状态。在这种情况下，我的列表将被更新，Tick组件将收到this.state.clickedItemId作为tick属性。要使此代码正常工作，还需要解决另一个问题： this.state.clickedItemId更新后，需要更新此映射列表。方法setState是异步的，这意味着仅在更新this.setState({mappedItems: this.mapItems(this.state.items)})之后才必须调用this.state.clickedItemId。为此，setState方法可以接收回调函数作为第二个参数。代码段如下：

toggleSelection (id, e) {
  if(!_.includes(this.state.selectedIds, id)) {
    this.setState((state) => ({
      clickedItemId: id,
      selectedIds: state.selectedIds.concat(id)
    }), () => this.setState({mappedItems: this.mapItems(this.state.items)}));
  }
}

在这种情况下，在执行mapItems函数时，来自此处所需状态的所有数据都将被更新：

mapItems (items) {
  return items.map(item => {
    return (
      <li key={item.id} onClick={(e) => (this.toggleSelection(item.id, e))}>
        <span>{item.title}</span>
        <span>{this.state.clickedItemId}</span>
        <Tick ticked={this.state.clickedItemId === item.id}/>
        <span className="close-item"></span>
      </li>
    );
  });
}

即使将更新的值从父级传递给子级，也不会呈现子级

2 个答案: