react-native：使用 async/await 和 setState答案

【问题标题】：react-native: Using async/await with setStatereact-native：使用 async/await 和 setState
【发布时间】：2019-09-10 10:44:52
【问题描述】：

我有这个简单的代码。

export default class ProductDetail extends Component {

  constructor(props) {
    super(props);
    this.state = { test: null,id:this.props.navigation.state.params.productId };
    console.log(1);
  }

  componentWillMount() {
    console.log(2);
    this.getProductRequest(this.state.id);
    console.log(3);
  }

  async getProductRequest(id) {
    try {
      let api_token = await AsyncStorage.getItem('apiToken')
      let response = await fetch('...')
      let json = await response.json();
      this.setState({test: json});

    } catch(error) {
      //
    }

  }

  render() {
    console.log(4);
    console.log(this.state.test);
    return (
      <View><Text>test</Text></View>
    );
  }
}

现在，我在调试器中检查了它：

我期待这个结果：

1

2

3

4

{数据：{…}，状态：“成功”，…}

但我明白了：

1

2

3

4

空

4

{数据：{…}，状态：“成功”，…}

我认为这意味着 render() 运行两次！

我该如何处理这个错误？

【问题讨论】：

componentWillMount 已被弃用，特别是因为它经常被滥用。异步调用属于 componentDidMount。

标签： json reactjs react-native async-await

【解决方案1】：

为了补充 T.J Crowder 的回答，我喜欢做的一件事是如果尚未收到数据，则返回 ActivityIndicator。

import {
    View,
    Text,
    ActivityIndicator
} from 'react-native';

export default class ProductDetail extends Component {
    ... your code ...

    render() {
        if (!this.state.test) {
            return <ActivityIndicator size='large' color='black' />
        }

        console.log(4);
        console.log(this.state.test);
        return (
          <View><Text>test</Text></View>
        );
    }
}

【讨论】：

【解决方案2】：

我认为这意味着 render() 运行两次！

确实如此：在您的异步结果可用之前一次，然后在您使用 setState 时再一次。这是正常的，也是意料之中的。

您无法等待异步操作完成的第一个渲染。您的选择是：

当组件还没有数据时，适当地渲染它。或者，
如果您在异步操作完成之前根本不想渲染组件，请将该操作移入父组件并仅在数据可用时渲染该组件，将数据作为道具传递给这个组件。

【讨论】：