“TypeError：无法读取未定义的属性'map'”但控制台日志结果可以完全正常吗？

Question

我目前有两种状态。一个是一个空数组，叫做“subproducts”，另一个叫做“additionalprod”。

subproducts 是一个数组，它使用 Axios 从我的后端数据库中提取信息。它安装在 componentDidMount 内部以供 API 调用。

additionalprod(uct) 是一个状态，它从父级的道具中获取其值，它是一个数字，在这种情况下，出于我的测试目的，数字是 5。数字 5 链接到一个包含 3 的小数组特性。产品、img_url 和 id。

当我控制台记录确切的代码时

console.log(this.state.subproducts[5])

我得到了我想要的响应，那个特定的数组，所以我 100% 正确地定位它。它目前有 2 个数组，里面有自己的道具。

但是，当我尝试通过该状态映射时，使用代码

{this.state.subproducts[5].map((product) => {
<h1>{product.img_url}</h1>
})}

我得到了错误

TypeError: Cannot read property 'map' of undefined

有人知道怎么回事吗？

有问题的代码：

import React from "react"
import axios from "axios"

class SubProducts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      subproducts: [],
      stage: "3",
      selected: this.props.selected,
      additionalprod: this.props.additionalprod,
    }
  }

  componentDidMount() {
    axios.get("http://localhost/api/subproducts.php").then((res) => {
      this.setState({ subproducts: res.data })
      console.log(this.state.subproducts[5])
    })
  }

  render() {
    return (
      <div>
        {this.state.subproducts[this.state.additionalprod].map((product) => {
          ;<h1>{product.img_url}</h1>
        })}
      </div>
    )
  }
}

export default SubProducts

编辑：

在使用 Sean Rileys 修复后，我正在尝试自己控制台日志 {product}，现在我在控制台中遇到了这个问题，但仍然无法通过将 {product.img_url} 输出到那里是一个错误，“编译失败”

Answer 1

在初始渲染时，this.state.subproducts 为空，因此它无法在数组上运行 map 函数。只有在 API 调用之后，数组才会被数据填充。

这是一个非常常见的 React 问题，它是一个非常简单的解决方案，可以在运行方法之前检查数组是否为空。

{this.state.subproducts && this.state.subproducts[this.state.additionalprod].map((product) => {
  <h1>{product.img_url}</h1>
})}

this.state.subproducts &&... 只是检查数组是否返回真值，如果它不为空，它将运行，如果是，它将运行下一段代码。

另一个选项是“可选链接”，它几乎做同样的事情。

{this.state.subproducts[this.state.additionalprod]?.map((product) => {
  <h1>{product.img_url}</h1>
})}

注意map ?.map 前面的问号。通过在我们调用函数的数组后面添加问号，它只会在数组被定义的情况下运行，否则它将返回undefined，但您不会收到错误。

Answer 2

您必须在渲染之前等待响应，只需为您的数组添加长度检查：

componentDidMount() {
  this.setState({additionalprod: this.props.additionalprod}, () => {
    axios.get("http://localhost/api/subproducts.php").then((res) => {
      this.setState({ subproducts: res.data })
      console.log(this.state.subproducts[5])
    });
 }
}

render() {
  return (
    <div>
      {this.state.subproducts.length > 0 ? 
         this.state.subproducts[this.state.additionalprod].map((product) => 
            <h1>{product.img_url}</h1>
          }) : null 
    </div>
  )
 }