Question

我正在尝试从API获取数据并将其置于状态，然后再将其呈现在组件上。

但是，在将任何值放入空状态之前，将继续调用该空状态。

这是代码：

const cookies = new Cookies();

class ProductDetails extends Component {

state = {product:null}

componentWillMount(){
    this.getSelectedProduct()
}
getSelectedProduct(){
    var selected = cookies.get('SelectedProduct')
    Axios.get('http://localhost:1002/products/' + selected)
    .then(ok=>{
        console.log(ok.data)
        this.setState({product:ok.data})
        console.log(this.state.product[0].ProductName)
    })
}
renderContent(){
    console.log(this.state.product)
    if(this.state.product !== [] ){
        const {ProductName, ProductPrice, Description, Brand, Color, ScreenSize, RAM, Storage, Stock} = this.state.product[0]
        return([
            ProductName,
            ProductPrice,
            Description, 
            Brand, 
            Color, 
            ScreenSize, 
            RAM, 
            Storage, 
            Stock
        ])
    }
}
render(){
    return(
        <div >
            <h3>{this.renderContent().ProductName}</h3>

        </div>
    )
}
}
export default ProductDetails

Answer 1

这就是React的工作方式– setState是异步的，即使您从componentWillMount进行操作，它也不会阻止组件在状态设置之前呈现。

在您的render方法中，检查是否已设置product并仅在已设置时调用renderContent。

您可以显示“请稍候”消息或微调框。

示例：

render() {
    if (this.state.product === null) {


    return(
        <div >
            <h3>{
                this.state.product === null ? 
                "loading data, please wait" :
                this.renderContent().ProductName
            }</h3>
        </div>
    )
}

请注意：：componentWillMount已过时，在最新的React版本中不可用。您应该改用componentDidMount。

Answer 2

我同意先前的回答，您应该将初始状态用作模型，并因此为状态积提供一个空数组的值。但是，如果您仍想在初始状态下定义null，则可以在返回render方法之前进行检查。

render(){
  if (!Array.isArray(this.state.product) {
    return null // or something else such a loading icon or similar.
  }

  return(
    <div >
      Your rendered content here
      ...
    </div>
  )
}

请参见isArray的参考页：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

在从API接收值之前调用React状态

2 个答案: