reactjs – 在安装react组件时未调用componentDidMount()

我一直试图从服务器获取一些数据,并且由于一些奇怪的原因,componentDidMount()没有按原样触发.我在componentDidMount()中添加了一个console.log()语句来检查它是否正在触发.我知道对服务器的请求是正常的,因为我在反应之外使用它并且它应该工作.

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      obj: {}
    };
  };

  getAllStarShips () {
    reachGraphQL('http://localhost:4000/', `{
     allStarships(first: 7) {
       edges {
         node {
           id
           name
           model
           costInCredits
           pilotConnection {
             edges {
               node {
                 ...pilotFragment
               }
             }
           }
         }
       }
     }
    }
    fragment pilotFragment on Person {
     name
     homeworld { name }
   }`, {}). then((data) => {
     console.log('getALL:', JSON.stringify(data, null, 2))
      this.setState({
        obj: data
      });
   });
  }

  componentDidMount() {
    console.log('Check to see if firing')
    this.getAllStarShips();
  }

  render() {
    console.log('state:',JSON.stringify(this.state.obj, null, 2));
  return (
    <div>
      <h1>React-Reach!</h1>
      <p>{this.state.obj.allStarships.edges[1].node.name}</p>
    </div>
  );
}

}

render(
  <App></App>,
  document.getElementById('app')
);
这里的问题是渲染方法崩溃,因为以下行生成错误

<p>{this.state.obj.allStarships.edges[1].node.name}</p>

解决此问题,不要直接使用this.state.obj.allStarships.edges [1] .node.name,除非您可以保证每个接收器都已定义.

相关文章
相关标签/搜索