React中renderAnalysis函数返回的DOM元素无法正常显示问题求解

问题原因 #

• 你的renderAnalysis函数没有返回任何值：两层map生成的JSX数组既没有被变量接收，也没有作为函数返回值向外传递，函数执行完成后默认返回undefined，因此页面没有内容渲染。
• 代码中{(food, singleDescription, value)}属于逗号表达式，最终只会渲染最后一个value的值，food和singleDescription会被直接丢弃，无法正常展示三个内容。
• 循环渲染的JSX元素没有添加唯一key属性，运行时会触发React的警告提示。

修正方案 #

替换你的renderAnalysis函数为以下代码即可正常渲染：

renderAnalysis = () => {
  const reactions = this.state.reactions;
  const foods = Object.keys(reactions);
  // 第一层map返回值作为函数返回值，加flat()把嵌套数组拍平，避免不必要的层级
  return foods.map((food) => {
    const reactionDescriptions = reactions[food];
    const responseKey = Object.keys(reactionDescriptions);
    // 第二层map返回对应JSX
    return responseKey.map((singleDescription) => {
      const value = reactionDescriptions[singleDescription];
      // 拼接唯一key，同时正常展示三个字段
      return <div key={`${food}-${singleDescription}`}>
        {food} | {singleDescription} | {value}
      </div>;
    });
  }).flat();
};

补充说明 #

你现有的按钮点击切换展示的逻辑没有问题，不需要额外修改。如果需要调整内容的展示格式，直接修改div内部的插值逻辑即可。

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