ReactJS - 如何更新嵌套和“正常”状态属性？答案

【问题标题】：ReactJS - how do I update nested and "normal" state properties?ReactJS - 如何更新嵌套和“正常”状态属性？
【发布时间】：2018-11-26 14:56:33
【问题描述】：

这就是我的state 的样子：

constructor(props, context) {
    super(props, context);

    this.state = {
      show: false,
      btnLabel: 'GO!',
      car: {
        owner: false, 
        manufacturer: false, 
        color: false
      }
    };
  }

这就是我修改state的方式：

handleClickFetchPrice() {
      this.setState({btnLabel: 'Fetching data...' });
      console.log(this.state.fetchPriceBtn);

      const url = 'some url';
      axios.get(url)
        .then(res => {
          let car = [...this.state.car];
          car.owner = res.data.owner;
          car.manufacturer = res.data.manufacturer;
          car.color = res.data.color;
          this.setState({car});
        })
  }

car 属性已更新，但 fetchPriceBtn 未更新 - console.log(this.state.fetchPriceBtn); 的输出仍为 GO!。

我忽略了什么？为什么fetchPriceBtn 没有更新？

【问题讨论】：

标签： javascript reactjs state axios react-state-management

【解决方案1】：

React setState 是一个异步过程——你不知道它什么时候会更新，你只能安排更新。

要实现您想要的功能，您可以向setState 方法提供回调。

this.setState({ btnLabel: 'Fetching data...' }, () => console.log(this.state.fetchPriceBtn))

您可以在该方法上了解更多following the documentation。

【讨论】：

【解决方案2】：

@christopher 是对的，setState 是一个异步进程。但是当第二次调用handleClickFetchPrice() 函数时，你的btnLabel 的值将等于Fetching data...

【讨论】：

【解决方案3】：

正如在之前的答案中回答的那样，setState 是异步的，因此您的 console.log 无法立即赶上状态变化。再次按照建议，您可以使用回调函数来跟踪此更改，但如果您使用 console.log 只是为了调试或想查看您的状态发生了哪些变化，您可以在您的渲染函数中执行此操作。并且仅使用回调进行调试不是一个好方法。它的目的有所不同，如果您查看官方文档，则针对此类逻辑建议使用 componentDidMount 方法。

render() {
    console.log( this.state.foo );
    return (...)
}

如果您这样做，您会看到两个 console.log 输出，一个在状态更改之前，一个在状态更改之后。

此外，您的状态操作可能会得到增强。您的汽车属性不是数组，但是您将其转换为数组并进行设置？这是你想要的吗：

axios.get(url)
    .then(res => {
        const { owner, manufacturer, color } = res.data;
        this.setState( prevState => ( { car: { ...prevState.car, owner, manufacturer, color } } ) );
     })

这里我们不是直接改变我们的状态，而是使用扩展运算符并设置所需的属性。对于您的示例，我们实际上是在设置整个属性。

最后一点，我认为您想这样做：

this.setState( { btnLabel: "fetching } );
axios.get(url)
    .then(res => {
        const { owner, manufacturer, color } = res.data;
        this.setState( prevState => ( { car: { ...prevState.car, owner, manufacturer, color }, btnLabel: "go" } ) );
     })

如果您的意图是以某种方式进行状态更改/检查，这可能不是一个好的逻辑，因为您已经看到 setState 不是同步的。请谨慎操作。

【讨论】：