如何防止渲染方法在初始设置为未定义的状态上抛出错误

Question

我正在尝试通过从 api 中提取数据来呈现我的状态，因此状态的初始值是未定义的。我收到错误TypeError: undefined is not an object (evaluating 'this.state.Pods[0].Name')。根据我对 react 的理解，每次更新状态时，使用该状态的组件都会重新呈现，因此最初未定义的文本将呈现更新后的状态值。我的问题是你能否绕过初始错误被抛出，以便它可以在更新时呈现状态值。这是我如何调用状态：<Text>{this.state.Pods[0].Name}</Text>我试过使用 getDerivedStateFromError 但它对我不起作用。static getDerivedStateFromError(error) {        return { hasError: true };      } render() {        if (this.state.hasError) {            return <Text>Something went Wrong</Text>        }

Answer 1

好吧，在你做任何事情之前先验证一下。

因此，请验证是否this.state.Pods存在以及this.state.Pods[0]是否存在。

话虽如此，直接访问一个索引然后只使用那个索引，这就引出了一个问题，你为什么需要一个数组？

因此，您可以先验证是否this.state.hasError为真，然后返回错误消息，如果不为真，并且您还没有 Pod，则返回 null，否则返回您的实际渲染，例如：

render() {

  const { hasError, Pods = [] } = this.state;

  if (hasError) {

    return <div>Error occured</div>;

  }

  if (Array.isArray(Pods) || !Pods[0]) {

    return null;

  }

  return <Text>{Pods[0].Name}</Text>;

}

当状态更新时，您的组件将重新渲染并再次检查所有条件，给您一个错误，再次为空（如果 Pods 尚不存在或不是您期望的那样），或者它将渲染您的文本元素

Answer 2

请使用这个

  render() {

    if (!this.state.Pods || !this.state.Pods[0] )  {

        return <Text>Loading</Text>

    }