Question

烦人的 React 错误……“TypeError: 无法读取 null 的属性‘My_Items’”

2017-09-28

941

javascript reactjs ecmascript-6

我有一个子组件，我需要通过 props 向其传递一个对象，并在该对象内的数组中找到索引值。如果您查看下面的代码，它相当简单。

我收到此错误：

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);

Answer 1

看起来 MyComponent （和 IndexComponent ）渲染在 store.data.myObject 初始化之前开始。我建议

1）检查初始 redux 状态；应该有类似

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

2）以类似

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

或使用 p.(1)

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

的方式保护 IndexComponent 渲染