为什么我的ReactJS组件没有动态渲染？

Question

我正在尝试从服务器获取 JavaScript 对象数组并将它们动态呈现到一组单选按钮中。

在此示例中，我有一个包含 28 个 JavaScript 对象的数组，因此我应该看到 29 个单选按钮呈现（下面代码示例底部的 28 + 1 个），但它们没有呈现。

我错过了什么？

export default function RadioButtonGroup({insurances, isLoaded}) {
    if (!isLoaded) {
        return (<h5>Loading...</h5>);
    } else return(
        <>
        {
            insurances.forEach((element) =>
                <div id={`radioDiv_${element.id_in_group}`}>
                    <input type="radio" id={`button_${element.id_in_group}`} name="insGroup"/>
                    <label for={`button_${element.id_in_group}`}>{element.insurance_name}</label><br/>
                </div>      
        )}
            <input type="radio" id="notListed" name="insGroup"/>
            <label for="notListed">My insurance is not listed.</label>
        </>
    );
}

提取工作正常，我已经测试过，我从提取中获取了一组 JavaScript 对象，然后将其作为 prop 传递给我的函数组件（通过 console.log 进行测试）。

但是当我在浏览器中查看我的组件时，出现的唯一单选按钮是“我的保险未列出”，即动态单选按钮组之外的单选按钮。

Answer 1

您的

foreach()

没有返回任何内容，因为它只是运行提供的函数（没有返回方法）。 我建议使用

map()

方法，特别是如果你有一个对象数组（json）

 {insurances.map((element) => (
          <div id={`radioDiv_${element.id_in_group}`}>
            <input
              type="radio"
              id={`button_${element.id_in_group}`}
              name="insGroup"
            />
            <label for={`button_${element.id_in_group}`}>
              {element.insurance_name}
            </label>
            <br />
          </div>
        ))}

如果您仍有问题：

您的对象可能有一个稍微不同的对象标准