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

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() {&nbsp; const { hasError, Pods = [] } = this.state;&nbsp; if (hasError) {&nbsp; &nbsp; return <div>Error occured</div>;&nbsp; }&nbsp; if (Array.isArray(Pods) || !Pods[0]) {&nbsp; &nbsp; return null;&nbsp; }&nbsp; return <Text>{Pods[0].Name}</Text>;}当状态更新时，您的组件将重新渲染并再次检查所有条件，给您一个错误，再次为空（如果 Pods 尚不存在或不是您期望的那样），或者它将渲染您的文本元素

Answer 2

请使用这个&nbsp; render() {&nbsp; &nbsp; if (!this.state.Pods || !this.state.Pods[0] )&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; return <Text>Loading</Text>&nbsp; &nbsp; }