javascript - 无法将未定义或 null 转换为 react 中的对象

Question

我正在尝试从初始状态对象映射对象属性。我可以获得除嵌套的 milesotnes 之外的所有属性。

初始状态在组件类构造函数中定义如下:

class GoalView extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataGoal: {},
      uid: firebaseAuth().currentUser.uid,
      currentGoalId: this.props.match.params.goalId,
    };
  }

  componentDidMount = () => {
    const dataGoalRef = dbRef.child('goals/'+this.state.uid+'/'+this.state.currentGoalId);
    dataGoalRef.on('value', snap => {
        this.setState({
          dataGoal: snap.val(),
          currentGoalId: this.props.match.params.goalId,
        });
    });
  }

  componentWillUnmount = () => {
    this.state = {
      currentGoalId: null,
    };
  }
  
  ...
  
}

我正在从 React Router V4 链接获取 currentGoalId:

<Link title="Open goal" to={"/app/goal/id"+key}>Open goal</Link>

属于高阶组件。当前 GoalView 组件的渲染方法如下所示:

  render() {
    return(
      <div>
        <main className="content">
          <p>{this.state.dataGoal.description}</p><br /><br />

            {Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) => {
              const milestonesData = this.state.dataGoal.milestones[milestoneKey];

              return <div className="milestone-wrap" key={milestoneKey}>
                       <label className="milestone-label truncate">{milestonesData.name}</label>

                     </div>
            })}

        </main>
      </div>
    );
  }
}

和状态:

I am getting Cannot convert undefined or null to object from this row {Object.keys(this.state.dataGoal.milestones).map( (milestoneKey)
=> {...}

但是该行正上方的渲染方法中的 description 渲染得很好。请问有人有什么想法吗？

谢谢，雅各布

Answer 1

在使用 Object.keys() 之前检查 dataGoal，如下所示:

this.state.dataGoal.milestones && Object.keys(this.state.dataGoal.milestones)

原因:您正在从服务器获取数据需要时间，直到 this.state.dataGoal.milestones 将 undefined .

或者您可以通过在状态变量中使用 bool 来暂停渲染，直到您没有获取数据。

检查这个，它会产生同样的错误:

let a = {};

Object.keys(a.a).map(el => console.log(el));

建议:lifecycle methods不需要绑定(bind)，直接使用，去掉lifecycle methods<的arrow function/.