如何通过反应中的onChange更改图标

Question

我尝试将onChange设置为更改图标。
但这不起作用。

前端：React
css：semantic-ui-react

  constructor(props: {}) {
    super(props);
    this.state = {
      icon: 'image',
    };
    this.changeIcon = this.changeIcon.bind(this);
  }

  changeIcon() {
    this.setState({icon: 'delete'});
    console.log(this.state.icon);
  }

  render() {
    return (
          <List>
            {(this.state.files || []).map((file, i) => {
              return (
                <List.Item
                  //icon="image"
                  icon={`${this.state.icon}`}
                  content={file.name}
                  onClick={this.handleRemove}
                  onChange={this.changeIcon}
                />
              );
            })}
          </List>
    );
  }

完整代码在这里：
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx

我希望onChange可以将图标从图像更改为删除。
但是实际情况并非如此。

Answer 1

正如他们在文档changing state might be asynchronous中所说。

也许不尝试将对象传递给setState而是尝试传递函数？

希望它会有所帮助：）