惱人的反應錯誤...「TypeError：無法讀取屬性'My_Items'null」

我有一個子組件，我需要通過道具傳遞一個對象並在該對象內的數組內找到一個索引值。如果你看下面的代碼，它是相當簡單的。惱人的反應錯誤...「TypeError：無法讀取屬性'My_Items'null」

我得到這個錯誤：

TypeError: Cannot read property 'My_Items' of null

我已經試過初始化「My_Items」陣列一堆不同的方式，但我仍然得到錯誤。

如何從IndexComponent訪問該數組中的那些值並避免此錯誤？

import React, {Component} from 'react'; 
import {connect} from "react-redux"; 

function IndexComponent(props) { 
    const { 
    typeName, 
    myObject 
    } = props; 


    const getAtIndex = (type) => { //this function retrieves the index of the desired item inside the My_Items array, inside the larger object 
    let index; 
     myObject.My_Items.map(item => { 
     if(item.title === type) { 
     index = myObject.My_Items.indexOf(item); 
     } 
    }) 
    return index; 
    } 

    return (
     <div> 
     My Desired Index Value: {getAtIndex(typeName)} <br/> 
     </div> 
    ) 
} 

class MyComponent extends Component { 

    render() { 

    const { 
     typeName, 
     myObject 
    } = this.props; 


    return (
      <div className="row"> 
      <div className="col-xl-5"> 

       <IndexComponent typeName={typeName} myObject={myObject} /> 

      </div> 
      </div> 
)} 

export default connect(
    (store) => { 
    return { 
     typeName: store.data.typeName, 
     myObject: store.data.myObject 
    }; 
    } 
)(MyComponent);

來源

2017-09-28 fromspace

錯誤是告訴你，'myObject'爲空，而不是'My_Items'。 – stybl

你確定'store.data.myObject'不應該是'store.myObject'嗎？你能告訴我們你的Redux商店嗎？ – lilezek

@stybl好的事情是它不是空的，我可以console.log對象和打印就好..我怎麼讓它看到的數據？ – fromspace

貌似MyComponent（和IndexComponent）渲染開始之前store.data.myObject被初始化。我會推薦

1）檢查最初的還原狀態;應該有類似

data: { 
    myObject: { 
    My_Items: [], 
    // ... 
    }, 
    // ... 
}

2）保護IndexComponent呈現的方式類似

return myObject && myObject.My_Items && myObject.My_Items.length ? (
    <div> 
    My Desired Index Value: {getAtIndex(typeName)} <br/> 
    </div> 
) : (null)

或第（1）

return myObject.My_Items.length ? (
    <div> 
    My Desired Index Value: {getAtIndex(typeName)} <br/> 
    </div> 
) : (null)

來源

2017-09-29 00:42:29 dhilt

惱人的反應錯誤...「TypeError：無法讀取屬性'My_Items'null」

回答

相關問題