Question

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

<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v4.1.0"></script>

console.log打印两次;一次与国家＆＃34; undefined＆＃34;然后当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))
  }

...在数据返回之前进行映射，因此我遇到了错误：

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

很抱歉，如果这对于这个论坛来说太基础了。它可能是我忘记的直截了当的事情！

Answer 1

我认为在渲染中渲染ajax数据的最佳方法。将构造函数中的状态设置为null，这不会给你带来问题 未捕获的TypeError：无法读取未定义的属性“map”。
class 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>);
    }
}

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

1 个答案: