是否可以在react render函数之外访问状态变量？

Question

是否可以在render()之外访问状态变量，但可以在React自定义组件方法内部访问状态变量？

  componentDidMount() {
    fetch(
      "some url here"
    )
      .then(res => res.json())
      .then(json => {
        const days = this.getRainyDays(json)

        this.setState({
          data: json,
          rainyDays: days
        });
      });
  }

 getRainyDays = (data) => {
    console.log('data inside getRainyDays', this.state.data) // this.state.data is undefined here
    console.log('data inside getRainyDays2', data) // data returns json fine
  }

  render() {
   console.log(this.state.data) // this.state.data is fine too.
    return (
      <div className="App">
        <header className="App-header">
          Calendar showing {this.state.rainyDays} rainy days
        </header>
        <Year weatherData={this.state.data} />
        <Weather />
      </div>
    );
  }

Answer 1

是的，可以在render方法之外访问组件内部的状态。

根据React文档：

setState()并不总是立即更新组件。 它可能会批量更新或将更新推迟到以后。 这使得在调用setState()之后立即读取this.state可能是一个陷阱。

由于您的初始状态很可能没有将data属性设置为某个值，因此它以undefined返回。

你试图访问this.state.data内getRainyDays之前，你甚至打电话this.setState内componentDidMount ：

componentDidMount() {
  fetch(...)
    .then(json => {
      const days = this.getRainyDays(json)
      this.setState(...)
    })
}

getRainyDays = (data) => {
  console.log('data inside getRainyDays', this.state.data)
}

但是，即使您在this.getRainyDays之后this.setState ，也不能依靠this.setState立即更新您的状态。

同样，从React文档中：

将setState()视为请求而不是立即更新组件的命令。 为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证状态更改会立即应用。

但是，如果您想再次检查一下状态是否正确更新，则可以将回调传递给setState ，该回调将在setState更新组件的状态后被调用，如下所示：

componentDidMount() {
  fetch(..)
    .then(res => res.json())
    .then(json => {
      const days = this.getRainyDays(json)

      this.setState({
        data: json,
        rainyDays: days
      }, () => {
        console.log('data in state', this.state.data)
      });
    });
}

---

我建议的一件事是，在返回一些JSX之前，检查render函数内部的状态是否包含正确的数据。 您可能会遇到一些问题，其中某些组件需要一个项目数组并立即将其呈现，但是您向其传递undefined的内容并崩溃了...

render() {
  // exit early and return `null` so that nothing gets rendered
  // if your API call hasn't finished
  if (!this.state.data || !this.state.rainyDays) {
    return null
  }
  return (
    <div className="App">
      <header className="App-header">
        Calendar showing {this.state.rainyDays} rainy days
      </header>
      <Year weatherData={this.state.data} />
      <Weather />
    </div>
  );
}