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

Question

这是我的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不是fetchPriceBtn console.log(this.state.fetchPriceBtn);的输出console.log(this.state.fetchPriceBtn); 还是GO! 。

我在俯视什么？ 为什么fetchPriceBtn没有更新？

Answer 1

React setState是一个异步过程-您不知道何时更新它，只能安排更新。

为了实现所需的功能，可以向setState方法提供回调。

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

您可以按照该方法的文档了解更多信息。

Answer 2

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

Answer 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不同步。 仔细做。