0

这就是我的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不更新？

4

3 回答 3

1

@christopher is right, setState is an asynchronous process. But when second time call handleClickFetchPrice() function your btnLabel is value will be equal to Fetching data...

于 2018-06-17T15:28:00.920 回答
1

正如前面的答案所回答的， 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 不是同步的。仔细执行此操作。

于 2018-06-17T16:09:11.237 回答
1

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

为了实现您想要的功能，您可以在该方法中提供回调setState。

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

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

于 2018-06-17T15:23:38.927 回答