解析JSON對象數組並在ReactJS中顯示

Question

最近我的React App遇到了一個奇怪的問題。 我正在嘗試解析一個包含數據數組的JSON對象。 數據是這樣的：

{“地點”：“舊金山”，“國家”：“美國”，“作者”：{“名稱”：“ xyz”，“標題”：“從星空看”}，“年份”：“ 2018” ，“ Places”：[{“ Price”：“ Free”，“ Address”：“ sfo”}，{“ Price”：“ $ 10”，“ Address”：“ museum”}]}

數據包含多個數組，例如我剛剛顯示的Author示例。 我有一個從URL提取此數據的函數。 我在componentDidMount中調用該函數。 該函數獲取數據，即responseJson，然后將其存儲在我使用setState設置為result的空數組中。 在我的狀態下，我得到的結果是：[]。 我的代碼如下所示：

this.setState({result:responseJson})

現在，當我嘗試從結果中訪問“作者姓名”時，出現錯誤。 所以像這樣：

{this.state.result.Author.Name}

我正在使用用於顯示內容的函數來執行此操作。 我在返回render函數時調用了此函數。 我收到一條錯誤消息：

TypeError：無法讀取未定義的屬性“名稱”。 如果我嘗試低於內部的任何級別，都會收到相同的錯誤。 如果我顯示{this.state.result.Place}或{this.state.result.Country}都很好。 但是，如果我嘗試使用{this.state.result.Author.Title}或{this.state.result.Places [0] .Price}，它會給我同樣的錯誤。 令人驚訝的是，我已經在我的不同組件中解析了同一對象，並且在那里沒有錯誤。 誰能解釋一下為什么會這樣嗎？

如果在setState中將單個元素存儲在提取調用函數中，則可以顯示它。 例如：

 {result:responseJson, AuthorName:responseJson.Author.Name } 

然后，我可以繼續將其用作{this.state.AuthorName}。

請幫助我找到解決此問題的方法。 提前致謝！

Answer 1

可能是您的狀態對象在第一個渲染時為空，並且僅在請求完成后（即在第一個渲染后）才使用API​​中的數據進行更新。 Name和Place屬性不會引發錯誤，因為它們可能會解析為undefined。

嘗試將if塊放入渲染方法中，以檢查結果是否已加載，如果尚未加載，則顯示加載指示符。

我猜你的初始狀態是這樣的：

{ results: {} }

不看更多代碼就很難說。

[編輯]：添加聊天記錄

首次渲染時數據不可用。 呈現此組件的事件序列如下所示：

1. 實例化組件，初始狀態設置為{ results: [] }
2. 組件已安裝，API調用已觸發（請注意，此異步操作尚未返回數據）
3. 第一次調用渲染方法。 這是在API請求返回數據之前發生的，因此狀態對象仍然是{results: [] } 。 此時任何試圖獲得作者的嘗試都將導致錯誤results.Authors undefined
4. API請求返回數據，setState調用將狀態更新為{ results: { name: 'test', author: [...] } } 。 這將觸發組件的重新渲染
5. 第二次調用渲染方法。 僅在這一點上，狀態對象中才有數據。

Answer 2

如果該狀態發生變化，則意味着它在componentDidMount上進行了更改，或者在獲取或進行任何其他操作后發生了更改，很可能您的狀態首先為空，然后填充了您的數據。

因此，收到此錯誤的原因很簡單，那就是react試圖在this.state.result.Author甚至存在之前就獲得this.state.result.Author.Name。

要獲取它，請首先測試this.state.result.Author，如果確實存在某些內容，則獲取如下的Author.Name。

render(){
    return(
        <div>
            {this.state.result.Author ? this.state.result.Author.Name : 'not ready yet'}
        </div>
    );

}

[編輯]我將在這里回答評論：這僅僅是因為它們在對象中處於較高級別。

this.state.result將始終返回的東西，甚至是錯誤的，如果沒有result在你的國家重點（在構造函數沒有結果的關鍵，例如組件支架時）。

如果結果不是構造函數中狀態的鍵，則this.state.result.Country將顯示相同的錯誤。 但是，如果在您的構造函數中定義了result，那么它一開始將為false，然后在填充新狀態時成為數據。

this.state.result.Author.Name再次更深一層...

因此，為了避免這種情況，您將必須在構造函數中定義整個“模式”（我認為這是不好的做法 ）。 如果我沒有記錯的話，下面的代碼在獲取this.state.result.Author.Name時不會出錯。 它將首先返回false，然后返回值（如果有）。

constructor(props){
super(props);
    this.state={
        result: {
            Author: {}
        }
    }
}