Question

我实际上是在点击用户时试图在元素上切换一个类。但不幸的是，我的代码只为单个元素设置了类。看起来视图不会为后续点击刷新，即使set类没有删除。但我的商店正在更新。

这是我的代码。

class MyInterests extends Component {
    constructor(props) {
      super(props);
      this.state = {selected: []};
    }

    toggleChip(id, index, event){
        const { interestChanged } = this.props;
        let index = this.state.selected.indexOf(id);
        if(index === -1){
            this.state.selected.push(id);
        }else{
            this.state.selected.splice(index, 1);
        }
        interestChanged(this.state.selected);
    }

    render() {
    const {classes, myinterests: { categories, userinterest } } = this.props;
    const getClassNames = (id) => {
        return classNames(classes.chip, {[classes.selected]: (userinterest.indexOf(id) !== -1)});
    }
    return ( 
        /*..... Few element to support styles....*/
          {categories.map((data, index) => {
               return (
                 <Chip
                    key={data._id.$oid}
                    label={data.name}
                    onClick={this.toggleChip.bind(this, data._id.$oid, index)}
                    className={getClassNames(data._id.$oid)}
                  />
              );
       })}
);
  }
}

有谁可以告诉我这有什么问题，或者我怎样才能实现这个目标？

Answer 1

由于状态是不可变的，因此您无法使用https://repo.github.io/pages/some-page/。通过使用.push，您正在改变状态，因此~~没有信号对更改做出反应~~使更改容易受到未来状态更新的影响（请记住this.state.selected.push(id)是异步的并且更改是为了单一行动）看看this如何解决它。在您的情况下，更新状态的更好方法是这样的：

setState

ReactJS没有根据表达式设置类

1 个答案: