Question

作为reactJs的初学者，我正在尝试编写一个简单的单页面webapp。我的目的是从API获取数据并将其显示在我的网页上，因此我需要获取URL，将它们传递给我的子对象，然后让它们再次获取数据。

显然，当URL的提取仍然发生时，孩子们的渲染就开始了。

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
          title: '',
          events: '',
          people: '',
      };
  }
  componentWillMount(){
    fetch('http://example.org/').then(response => response.json())
    .then(json => this.setState({
      title: json.title,
      events: json.events,
      people: json.people,
    }))
  }

render(){
   return (
      <div>
          <Child
            url= {this.state.events}
          />
          <Child
            url= {this.state.people}
          />
    );
}

这是可能的孩子之一：

class Child extends Component {
   constructor(props) {
      super(props);
      this.state = {
          collection: [],
      };
  }
    componentWillMount(){
      fetch(this.props.url, {
          method: 'GET',
          headers: {
              Accept: 'application/json',
          },
        },
      ).then(response => {
      if (response.ok) {
          response.json().then( json => this.setState({
              collection: json[Object.keys(json)[0]],
          }));
      }
  });
}

尝试运行应用时，这些列表为空。值得注意的是，当在构造函数（或父项的渲染）中对相同的URL进行硬编码时，构造将完美地运行。

所以我的问题是，有没有办法让我的渲染等待我的提取完成，或者另一种方法来解决这个问题？

Answer 1

1-使用componentDidMount生命周期方法来获取数据，而不是componentWillMount。

2-要保留子组件中的rendering，在父组件中使用bool，它将告诉您数据是否已成功提取的状态。

使用此：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            events: '',
            people: '',
            isDataFetched: false
        };
    }
    componentDidMount(){
        fetch('http://example.org/')
          .then(response => response.json())
          .then(json => this.setState({
              title: json.title,
              events: json.events,
              people: json.people,
              isDataFetched : true
          }))
    }

    render(){
        if(!this.state.isDataFetched) return null;
          return (
              <div>
                  <Child
                    url= {this.state.events}
                  />
                  <Child
                    url= {this.state.people}
                  />
              </div>
          );
    }
}

为什么你的代码无效？

componentWillMount方法只在渲染之前被调用一次，你在父组件中进行api调用，而子组件中的fetch api依赖于该fetch调用的数据，并且在获取父获取调用之前数据，子组件被渲染并且子组件的componentWillMount被调用，因为子组件中的提取调用不起作用。

ReactJs：我的对象在构造函数提取数据

1 个答案: