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

Posted 2023-02-22

【中文标题】ReactJS - 如何更新嵌套和“正常”状态属性？

【英文标题】：ReactJS - how do I update nested and "normal" state properties?

【发布时间】：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 没有更新？

【参考方案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 不是同步的。请谨慎操作。