JSFiddle 示例 - React，无法更新渲染答案

【问题标题】：JSFiddle example - React, cannot get render to updateJSFiddle 示例 - React，无法更新渲染
【发布时间】：2019-12-27 20:16:30
【问题描述】：

我正在处理一个 JSFiddle 示例，但无法使其 100% 工作。

https://jsfiddle.net/richardmarais/kz0mLnge/13/

如您所见，它渲染了一些色块。

示例

当我点击其中一项时，onClick 事件被正确调用。

  render() {
    return (
      <Fragment>
        <ul>
          <li>{this.state.items.filter(i => i.isSelected).map(i => i.name).join(', ')}</li>
        </ul>
        <ul className="Colors">
          {this.state.items.map(item => (
            <li key={item.name} name={item.name} className={`Colors__item Colors__item--${item.color} ` + (item.isSelected ? 'Colors__item--state-selected' : '')} onClick={this.onClick}>
              {item.name}
            </li>
          ))}
        </ul>
      </Fragment>
           );
  }

项目列表已正确更新（即isSelected: true）。

{name: "colour blue", color: "blue", isSelected: true}

问题

DOM 未更新以反映 onClick。

所选项目的样式应更改为 Colors__item--state-selected。
选择的item.name应该是写入 Fragment 的顶部。

其他问题

onClick 函数从事件 (e.target.textContent) 中获取 item.name。有没有办法将item.name 作为参数传递给onClick 调用？

【问题讨论】：

标签： javascript html css reactjs dom

【解决方案1】：

不要直接分配state，这是你的问题。您必须使用方法this.setState()。更多信息在这里：https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly

还有其他问题 - 您可以通过两种方式处理它

（简单但不完美，这将在每次渲染时创建匿名函数） - 只需像这样传递给onClick 函数：oClick={(event) => this.onClick(event, item.name)} 并在您的this.onClick 方法中处理额外的name 参数或
（推荐）创建新的<Item> 组件并传递所有参数<Item object={item}>。在这个新的Item 组件中，您可以使用onClick 方法并在其中使用this.props.object 参数。

【讨论】：

感谢您的回答。我认为你是对的。但是，我没有使用setState() 的原因是因为我收到以下错误：Uncaught TypeError: Cannot read property 'items' of null。你知道我做错了什么吗？
这里有工作示例：jsfiddle.net/3a90qhvd 您还必须使用constructor() 中的道具调用super()。
谢谢。我在初始化时正在做 setState，我看到它需要在更新时完成

【解决方案2】：

你的状态没有更新，需要用setStatelike，

toggleItemSelectedState (name) {
    console.log(name);
    this.setState({
      items: this.state.items.map(i => {
        return name === i.name ?
          { ...i, isSelected: !i.isSelected } :
          i
      })
    })
  }

关于其他问题，

可以直接发item.namelike，

onClick={()=>this.onClick(item.name)}

而且功能应该是，

onClick = (name) => {
    this.toggleItemSelectedState(name);
    console.log(this.state.items[0]);
}

Demo

【讨论】：

感谢您的回答。我认为你是对的。但是，我没有使用setState() 的原因是因为我收到以下错误：Uncaught TypeError: Cannot read property 'items' of null。你知道我做错了什么吗？
没什么错的，你可以直接用我的回答替换你的函数。我只在你的小提琴上测试了这段代码。
谢谢。我在初始化时正在做 setState，我看到它需要在更新时完成

【解决方案3】：

@pako 是对的。您需要使用setState() 更新状态以使DOM 重新渲染。

至于您的其他问题，您可以使用onClick = {()=>this.onClick(item.name)} 直接将其传递给onClick 调用。

【讨论】：