Question

我一直在尝试使用 componentDidMount 将后端 API 与 react 连接，但是当我在 componentDidMount 中执行 console.log 时，它没有被调用，这意味着它没有触发后端 API 似乎运行良好。

class Products extends React.Component{
  constructor()
  {
    super()
    this.state={
      productsdetails:null
    }
    
  }
  componentDidMount()

  {   
    fetch('/api/v1/products') 
        .then((response) => response.json())
        .then((productsdetails) => this.setState({productsdetails:productsdetails }))
  }
  render(){
      console.log(this.state.productsdetails)
    return (
      <div className="body">
        <div className="container">
          {this.state.productsdetails.map((obj) => (
            <Product {...obj} />
          ))}
          
        </div>
      </div>
    )
  }
}
export default Products;

Answer 1

您可以只提供有效的初始状态。问题是 this.state.productsdetails 在初始渲染和所有后续渲染中为 null，直到它被 GET 请求和响应更新。

class Products extends React.Component{
  constructor() {
    super()
    this.state={
      productsdetails: [] // <-- empty array is mappable!
    }
  }

  componentDidMount() {   
    fetch('/api/v1/products') 
      .then((response) => response.json())
      .then((productsdetails) => {
        this.setState({ productsdetails })
      });
  }

  render() {
    return (
      <div className="body">
        <div className="container">
          {this.state.productsdetails.map((obj) => (
            <Product {...obj} />
          ))}
        </div>
      </div>
    )
  }
}

或者使用条件渲染来渲染其他内容，直到填充状态。在这里，我不渲染任何内容 (null)，直到 productsdetails 状态为真。

class Products extends React.Component{
  constructor() {
    super()
    this.state={
      productsdetails: null
    }
  }

  componentDidMount() {   
    fetch('/api/v1/products') 
      .then((response) => response.json())
      .then((productsdetails) => {
        this.setState({ productsdetails })
      });
  }

  render() {
    const { productsdetails } = this.state;

    if (!productsdetails) return null;

    return (
      <div className="body">
        <div className="container">
          {this.state.productsdetails.map((obj) => (
            <Product {...obj} />
          ))}
        </div>
      </div>
    )
  }
}

× 类型错误：无法读取 null 的属性“map”

1 个答案: