React嵌套数据结构双层循环时动态渲染元素失败问题求助

核心错误原因 #

• 第一层map没有返回内部遍历生成的JSX数组，导致最终textSectionValues的每个元素都是undefined，React不会渲染空值
• 取值逻辑错误：Object.values(values)遍历得到的item已经是完整的主题文本字符串，不需要再加[index]取字符，该写法只会返回字符串对应下标的单个字符

修正后代码 #

方式1：保留原有结构补全return #

const textSectionValues = valuesText.map((data) => {
  const values = data[props.language]
  // 补全return，把内部map生成的JSX数组返回给外层map
  return Object.values(values).map((item, index) => {
    // 给列表元素加key，符合React规范避免警告
    return <div className="hero_section_values_container" key={index}>
              <h3>{item}</h3>
          </div>
  })
})

方式2：优化冗余的外层map #

因为valuesText数组只有一个对象元素，可以直接取第一个元素减少一层遍历：

const AboutUs = (props) => {
  // 直接取第一个元素对应语言的文本数组
  const valueList = Object.values(valuesText[0][props.language])

  return(
      <section className="about_us_section">
           {valueList.map((item, index) => (
             <div className="hero_section_values_container" key={index}>
               <h3>{item}</h3>
             </div>
           ))}
      </section>
  )
}

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