当我循环的数据结构需要一个内部循环时，动态地发布渲染元素

Question

我在 React 项目中动态渲染元素时遇到问题。

这是我的数据文件xxx.js

export const valuesText = [
{
    "GB": {
        0: "Responsibility", 
        1: "Hospitality",
        2: "Attention to detail",
        3: "Adaptability",
        4: "Efficiency",
        5: "Passion for Quality"
    },
    "PT": {
        0: "Responsabilidade", 
        1: "Hospitalidade",
        2: "Detalhe e pormenor",
        3: "Adaptabilidade",
        4: "Eficiência",
        5: "Paixão pela Qualidade"
    }
}
]

这是我的组件和根据用户选择的语言呈现所有 5 个主题的逻辑 （GB 或 PT）

根据数据渲染元素的逻辑

const textSectionValues = valuesText.map((data) => {
const values = data[props.language]
Object.values(values).map((item, index) => {
    return <div className="hero_section_values_container">
                <h3>{item[index]}</h3>
            </div>
}
)})

Component 进行了调整，因此信息量对你们来说不会太吵

const AboutUs = (props) => {

 return(
     <section className="about_us_section">
          {textSectionValues}
     </section>
 )
}

通过 Chrome 开发人员工具，我可以看到从 Object.values 创建的数组正在迭代并具有正确的值。不幸的是，我还没有设法将内容呈现给 DOM。

我做错了什么？

谢谢！

Answer 1

首先，您的第一个循环没有 return 任何东西。其次，你需要打印item，因为它是真正的文本。

  const textSectionValues = valuesText.map((data) => {
    const values = data[props.language];
    return Object.values(values).map((item) => {
      return (
        <div key={item} className="hero_section_values_container">
          <h3>{item}</h3>
        </div>
      );
    });
  });

工作示例： https://codesandbox.io/s/nameless-currying-n0es7

Answer 2

你确定你的数据结构吗？它的数组只包含一个包含数据的对象，所以第一个映射是多余的。看看这个

const valuesText = {
  GB: {
    0: "Responsibility",
    1: "Hospitality",
    2: "Attention to detail",
    3: "Adaptability",
    4: "Efficiency",
    5: "Passion for Quality"
  },
  PT: {
    0: "Responsabilidade",
    1: "Hospitalidade",
    2: "Detalhe e pormenor",
    3: "Adaptabilidade",
    4: "Eficiência",
    5: "Paixão pela Qualidade"
  }
};

export default function App(props) {
  return (
    <div className="App">
      {Object.values(valuesText[props.language]).map((value, index) => (
        <h1 key={index}>{value}</h1>
      ))}
    </div>
  );
}

当我循环的数据结构需要一个内部循环时，动态地发布渲染元素

Issue rendering elements dynamically when data structure I loop through needs an inner loop

javascript

jsx

reactjs

conditional-rendering