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,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,除非您可以保证每个接收器都已定义.

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

猜你在找的React相关文章