如何延迟组件内的映射直到ajax调用完成

我的应用程序中有一个ajax调用，如下所示：

  componentWillMount() {
    fetch('http://localhost:8081/',{method: 'GET', mode: 'cors'})
    .then(
      (results) => results.json()
      )
    .then(
      data => this.setState(data)
      )
    .then(
      () => console.log(this.state)
      )
    .catch(
      err => console.log(err))
  }

console.log打印两次；一次状态为“undefined”，然后在ajax调用完成时再次出现。问题是使用来自ajax调用的数据的组件

componentDidMount(){
        const allProducts = this.props.products.map((val, ind) => 
            <div className="Product"><Product {...val} handleClick={this.props.handleClick} key={ind}/></div>
        );
      } 

---

对不起，如果这是一个太基本的论坛。这可能是一些我已经忘记的直截了当的事情

我认为在render中呈现ajax数据的最佳方法。 将构造函数中的状态设置为null，这不会给您带来 未捕获类型错误：无法读取未定义的属性“映射”。
类SomeClass扩展了React.Component{

    constructor(props) {
        super(props);
        this.state = { products: null };
    }
    componentWillMount() {
        fetch('http://localhost:8081/', { method: 'GET', mode: 'cors' })
            .then(
            (results) => results.json()
            )
            .then(
            data => this.setState(data)
            )
            .then(
            () => console.log(this.state)
            )
            .catch(
            err => console.log(err))
    }         



    render() {

        if (this.state.products == null) {
            return null;
        }
        return (<span>{
            this.state.products.map((val, ind) =>
                <div className="Product"><Product {...val} handleClick={this.props.handleClick} key={ind} /></div>
            )
        }</span>);
    }
}

构造函数（道具）{
超级（道具）；
this.state={products:null}；
}
组件willmount（）{
取（'http://localhost:8081/“，{方法：'GET'，模式：'cors'}）
.那么(
（results）=>results.json（）
)
.那么(
data=>this.setState（数据）
)
.那么(
（）=>console.log（this.state）
)
.接住(
err=>console.log（err））
}         
render（）{
if（this.state.products==null）{
返回null；
}
返回({
this.state.products.map（（val，ind）=>
)
});
}
}

您正在将数据设置为状态，但在渲染时，您正在使用道具。对不起，我无法把这些点连起来。这里少了一些东西。你能提供git回购或codesandbox吗？对我们来说会更容易。

    constructor(props) {
        super(props);
        this.state = { products: null };
    }
    componentWillMount() {
        fetch('http://localhost:8081/', { method: 'GET', mode: 'cors' })
            .then(
            (results) => results.json()
            )
            .then(
            data => this.setState(data)
            )
            .then(
            () => console.log(this.state)
            )
            .catch(
            err => console.log(err))
    }         



    render() {

        if (this.state.products == null) {
            return null;
        }
        return (<span>{
            this.state.products.map((val, ind) =>
                <div className="Product"><Product {...val} handleClick={this.props.handleClick} key={ind} /></div>
            )
        }</span>);
    }
}