如何将GraphQL获取的数组存入组件State并渲染，解决count未定义报错

报错根因定位 #

首先你遇到的count is not defined报错，本质是两个代码逻辑的问题：

1. 在setState的成功回调里，你直接写console.log(count)——当前代码作用域里根本没有声明叫count的独立变量，count只是你打算存在state上的字段名，不是可直接访问的局部变量，自然会触发未定义错误。
2. 你给count字段设的初始值是数字0，后续要存的是长度为10的品牌数组，两种数据类型完全不匹配，后续渲染时很容易出现“对数字调用map方法”的类型报错。

另外还有个容易踩的React机制坑：setState本身是异步触发的状态更新，哪怕你把打印语句改成正确的console.log(this.state.count)，如果和setState写在同一行同步执行，拿到的还是更新前的旧值。

修正后的完整实现 #

首先调整state的初始值，让类型和后续要存的品牌列表匹配，同时修正状态更新、打印的逻辑：

constructor(props) {
  super(props)
  this.state = {
    // 把字段名改成语义更清晰的brandList，初始值设为空数组
    brandList: []
  }
}

async componentDidMount() {
  try {
    const brandQuery = BrandPageInstance.getBrandList();
    // 直接await拿到查询结果，避免嵌套回调的混乱
    const mpbrand = await fetchQuery(brandQuery);
    // 把接口返回的items数组存入state
    this.setState({
      brandList: mpbrand.items
    }, () => {
      // 把打印逻辑放到setState的第二个参数（状态更新完成的回调）中，才能拿到最新的state值
      console.log('已获取的品牌列表：', this.state.brandList)
    })
  } catch (error) {
    // 统一在catch里捕获接口、查询的异常
    console.log('品牌列表查询失败：', error)
  }
}

组件内渲染品牌列表 #

状态存入之后，直接在render方法中遍历state里的列表完成渲染即可，记得给每个列表项绑定唯一的key：

render() {
  const { brandList } = this.state;
  return (
    <div className="brand-container">
      {brandList.map(brandItem => (
        <div className="brand-card" key={brandItem.default_value}>
          <img src={brandItem.image} alt={brandItem.default_value} />
          <p>{brandItem.default_value}</p>
        </div>
      ))}
    </div>
  )
}

新手常见避坑提示 #

• 不要给同一个state字段存类型差异极大的数据，比如初始存数字、后面存数组，会直接导致渲染逻辑崩溃。
• 不要在setState之后立刻同步打印state值，因为React的setState是批量异步更新的，同步执行的代码拿不到更新后的最新值。
• 遍历数组渲染列表时，不要用数组索引当列表项的key，要选数据本身的唯一值当key，避免后续数据更新时出现渲染错乱。

内容的提问来源于stack exchange，提问作者michael