Axios響應在嵌套React組件中不可用

感謝您的閱讀。我知道這看起來過於簡單，但我爲什麼會發生這種行爲真的很難過。我使用axios調用API，獲取答案，並通過道具將該答案傳遞給下面的組件。當我讓下面的代碼執行時，控制檯顯示對象 - 填充server/api數據。Axios響應在嵌套React組件中不可用

class Player extends React.Component{ 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     console.log(this.props.personData) 
     return ... 
    } 
}

如果我添加一個字段：執行console.log（this.props.personData.first_name）我得到一個錯誤，personData爲空，也不能訪問其成員。認爲這很奇怪，所以回到測試和進一步絆倒自己：

如果我在console.log行在Chrome中設置斷點，而是輸入this.props.personData到控制檯我得到空。如果我然後跨越console.log行，它會輸出null。但是如果我刪除斷點，那麼相同的代碼行就會輸出一個數據填充的對象。

任何人都可以解釋這種行爲嗎？不管是否愛可信還沒有返回

來源

2016-12-27 tigerMike

假設你的組件被渲染時，personData道具將null（或任何你構建它在父母的狀態）直到愛可信返回異步調用。

一旦數據返回，您可以有條件地呈現Player組件，或者直到您知道它不爲空時才引用數據的屬性。

這是因爲Player組件將在父裝載時初始呈現，但是，Axios API調用將是異步的，因此數據不可用。

此外，如果Player組件正在渲染屬性personData而未檢查它們是否存在，則會拋出錯誤並中斷渲染週期。

至於你關於斷點/記錄差異的問題，這是因爲控制檯日誌被映射到了prop的內存位置，所以最終它被設置並顯示在日誌中。但是，如果您在初始渲染時檢查斷點，則值將爲null，並且會拋出上述錯誤。

來源

2016-12-27 14:18:00

準確地說，我回到這裏來發布布拉德，謝謝。我把它包裝在一個空的檢查中，它工作。並感謝瀏覽器上的額外信息。有一個^和一個檢查哈哈 – tigerMike

很高興你能夠得到它的工作！好運。 –

你是使用redux或flux將數據傳遞給組件的。

來源

2016-12-28 07:17:01

Axios響應在嵌套React組件中不可用

回答

相關問題