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

Question

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

预期行为:作为用户，我看到一个项目列表。如果我点击一个项目，它应该变成选中状态。

export class ReactSample extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      items: [],
      mappedItems: [],
      selectedIds: [],
      isSelected: false,
      clickedTripId: null
    };

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

  componentWillMount(){
    console.log("Component mounting")
  }

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

  componentDidMount() {
    const self = this;
    MyService.getItems()
      .then(res => {
        self.setState(() => ({ items: res.allItems }));
        self.setState(() => ({ mappedItems: 
this.mapItems(res.allItems) }));
      }
    )
  }

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

  getItems() {

  }

  render() {
    return (
      <div>
        <a className="title">This is a react component!</a>
        <Spinner showSpinner={this.state.items.length <= 0}/>
        <div className="items-container">
          <ul id="itemsList">
            {this.state.mappedItems}
          </ul>
        </div>
      </div>
    );
  }
}


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

  render() {
    console.log('RENDER');
    return (<span className={this.props.ticked ? 'tick display' : 
'tick hide' }></span>);
  }
}

Answer 1

我发现了几个问题。

在toggleSelection中，您没有对mapItems的结果执行任何操作。如果您只是从状态中删除 mappedItems 并在渲染方法中调用 mapItems，那么这种错误会更容易避免。

另一个问题是您将 this.state.clickedTripId 作为 ticked 属性传递。我假设您打算传递类似于 this.state.clickedTripId === trip.id 的内容。