React中如何将this.setState()存储的二维数组传递至JSX渲染

你写的getResult方法已经可以正常把二维数组存入组件状态，不需要做额外的传值操作，直接在JSX渲染逻辑里从this.state读取对应字段做遍历即可，注意做好空值兜底、给列表项加key属性避免报错和控制台警告。

具体实现代码 #

在类组件的render方法中按如下逻辑写即可：

render() {
  // 解构state中的二维数组，设置空数组为默认兜底值，避免初次渲染数据未赋值时报错
  const { resultToJSX = [] } = this.state;

  return (
    <div>
      {resultToJSX.map((itemList, firstLevelIndex) => {
        // 外层循环节点加key，若列表无动态增删/排序场景可以直接用索引作为key值
        return (
          <ol key={firstLevelIndex}>
            {itemList.map((item, secondLevelIndex) => {
              return <li key={secondLevelIndex}>{item}</li>
            })}
          </ol>
        )
      })}
    </div>
  )
}

逻辑说明 #

• 类组件调用setState更新状态后会自动触发重渲染，render函数中能直接拿到最新的resultToJSX值，和你之前写死cart数组的渲染逻辑完全一致，只是数据源从固定变量换成了state中存储的动态值
• 加resultToJSX = []的默认值是为了避免组件首次加载时，getResult还没执行、state里没有对应字段的情况下，直接调用.map()抛出Cannot read properties of undefined (reading 'map')的运行时错误
• 两层循环都给对应的DOM节点加了key属性，符合React的列表渲染要求，不会抛出列表缺少key的警告

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