已解決430363個問題，去搜搜看，總會有你想問的

如何防止渲染方法在初始設置為未定義的狀態上拋出錯誤

首頁猿問如何防止渲染方法在初始設置為未定義...

如何防止渲染方法在初始設置為未定義的狀態上拋出錯誤

JavaScript

DIEA 2021-10-21 17:18:55

我正在嘗試通過從 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> }

查看完整描述

3 回答

揚帆大魚

TA貢獻1799條經驗獲得超9個贊

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

因此，請驗證是否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 尚不存在或不是您期望的那樣），或者它將渲染您的文本元素

反對回復 2021-10-21

智慧大石

TA貢獻1946條經驗獲得超3個贊

請使用這個

render() {

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

return <Text>Loading</Text>

}

反對回復 2021-10-21

3 回答
0 關注
159 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何防止渲染方法在初始設置為未定義的狀態上拋出錯誤

如何防止渲染方法在初始設置為未定義的狀態上拋出錯誤

3 回答

添加回答