使用 immutability-helper 在 if else 语句中调用时反应 this.state 未正确更新

Question

我正在尝试创建一个简单的水平标签栏组件。如果用户单击选项卡，则容器会执行一些逻辑。

通过this.state在容器中跟踪标签状态。容器的道具之一是一个名为“选项”的数组。长度决定了标签栏中的标签数量。

constructor(props){
        super(props)

        var arrayWithTabs = []
        var isSelected;

        this.props.options.map((option, i) => {

            if (option == this.props.selected){
                isSelected = true
            } else {
                isSelected = false 
            }
            var tabObject = {
                optionName: option,
                isSelected: isSelected
            }
            arrayWithTabs.push(tabObject)

        })

        this.state = {
            options: arrayWithTabs,
        }

每当用户点击时，handleClick 就会被触发：

     updateState = (index,isSelected) => {
        this.setState((prevState) => {
            return update(prevState.options,{
                [index]: {
                    isSelected:{$set: isSelected}
                }
            })
        })
    }

    handleClick(e) {
        this.state.options.map((option, i) => {

            const isSelected = option.optionName == e.target.id;

            this.updateState(i, isSelected);
        })     
      }


    componentDidUpdate(){
        console.log(this.state.options)
    }

为了处理我读到的 setState 的异步行为，你不应该直接从 this.state 中读取，而是在 setState 中创建一个函数来接收 prevState。

但是，当单击任何选项卡时，componetDidUpdate() 会返回以下内容：

[{optionName: "Tab1", isSelected: false}
{optionName: "Tab2", isSelected: false}]

Answer 1

首先map函数返回一个数组。如果你不想从内部返回任何东西，你应该使用 forEach。

其次，在构造函数中你应该避免使用 this.props，因为你已经得到了 props。使用那个。

最后你可以在handleClick方法中做如下操作

handleClick(e) {
    const options = this.state.options.map((option, i) => {

        var isSelected = option.optionName === e.target.id;
        return {optionName: option.optionName, isSelected: isSelected}
    });
    this.setState({options})
  }

也可以如下修改构造函数

constructor(props){
    super(props)

    var options = props.options.map((option) => {

        var isSelected = (option == this.props.selected)
        return {
            optionName: option,
            isSelected: isSelected
        }

    })

    this.state = {
        options: options
    }
}

Answer 2

您可以使用回调来确保setState 已完成，例如：

addNewTabs(newOptions) {
    this.setState({ options:newOptions }, () => {
         console.log("Finished updating state:", this.state);
         // Do something with the updated state here...
    });
}

尝试将您的代码重组为以下内容：

handleClick(e) {

  var updatedState;

  this.state.options.map((option, i) => {
    const isSelected = option.optionName == e.target.id;
    updatedState = update(this.state.options, {
      [i]: {$set:{optionName: option.optionName, isSelected:isSelected}}
    });  
  });

  this.setState({ options:updatedState }, () => {
    console.log(updatedState);
  });
}