无法在反应中将 undefined 或 null 转换为对象

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 方法如下所示：

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

和国家：

我从这里得到Cannot convert undefined or null to object 行{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的绑定不是必须的，直接使用，把arrow function和lifecycle methods去掉。