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

Question

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

初始状态在组件类构造函数中定义，如下所示：

＆＃13;

＆＃13;

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,
    };
  }
  
  ...
  
}

＆＃13;

＆＃13;

＆＃13;

我从React Router V4 Link获得currentGoalId：

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

是更高阶的组件。当前GoalView组件的render方法如下所示：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

和州：

  

我从中得到Cannot convert undefined or null to object   行{Object.keys(this.state.dataGoal.milestones).map( (milestoneKey) => {...}

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

谢谢你， 的Jakub

Answer 1

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

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

原因：您要从服务器获取数据需要一段时间，直到this.state.dataGoal.milestones为undefined。

或者您可以保留渲染，直到您没有使用bool状态变量来获取数据。

检查一下，它会产生同样的错误：

＆＃13;

＆＃13;

let a = {};

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

＆＃13;

＆＃13;

＆＃13;

建议： lifecycle methods的绑定不是必需的，请直接使用，因此请arrow function移除lifecycle methods。