Javascript 如何迭代嵌套在对象中的数组作为道具

我有一个正在解析数据的JSON文件，但我试图映射一个子数组（嵌套在对象中）。然而，我得到了一个错误，数组是不可编辑的。我将数组记录到控制台，在那里它打印数组，但当我检查它的类型时，它会显示“object”

这是我的密码：

export default function Projects({ children, ...props }) {

  return (
    <div>
      <div>
        <div className={styles.text}>
          <p>{props.description}</p>
          <ul>
            {props.features.map((feature) => (
              <li>{feature}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

错误：

TypeError: Cannot read property 'map' of undefined

---

在初始渲染时，要素中还没有数据。使用条件如下->

props && props.features && props.features.map((feature) => (
          <li>{feature}</li>
        ))}

props&&props.features&&props.features.map（（feature）=>(
{feature}
))}

异步加载数据时，组件的初始呈现将无法访问数据（数据将

未定义

）

应该对组件进行编码，以通过显示不同的视图（例如加载动画）来应对这种情况

这可以通过在渲染组件之前简单地检查是否定义了

props.features

来实现：

export default function Projects({ children, ...props }) {

  return (
    <div>
      <div>
        <div className={styles.text}>
          <p>{props.description}</p>
          <ul>
            {
                /** Conditionally show only when props.features has a truthy value **/
                !!props.features && props.features.map((feature) => (
                    <li>{feature}</li>
                ))
            }
          </ul>
        </div>
      </div>
    </div>
  );
}

导出默认函数项目（{children，…props}）{
返回(
{props.description}


{
/**仅当props.features具有真实值时才有条件显示**/
！！props.features&&props.features.map（（feature）=>(
{feature}
))
}

);
}

要在加载数据时显示另一个组件/文本，可以使用三元语句：

export default function Projects({ children, ...props }) {

  return (
    <div>
      <div>
        <div className={styles.text}>
          <p>{props.description}</p>
          <ul>
            {
                /** Ternary statement to show components when props.features is a truthy value 
                    or loading when a falsy value **/
                props.features ? 
                    props.features.map((feature) => (
                        <li>{feature}</li>
                    )) :
                    "Loading..."
            }
          </ul>
        </div>
      </div>
    </div>
  );
}

导出默认函数项目（{children，…props}）{
返回(
{props.description}


{
/**当props.features为真实值时显示组件的三元语句
或在出现错误值时加载**/
道具、特征？
道具.特征.地图（（特征）=>(
{feature}
)) :
“正在加载…”
}

);
}

如果您异步加载数据，那么我假设在初始渲染时数据未定义，您需要通过显示加载动画或在加载数据之前不显示任何内容来确保视图考虑到这一点。您可以尝试使用

！！props.features&&props.features.map（）

（

map（）

仍应包括您的原始代码）。干杯，Jacob，将此作为答案发布（因为它起作用了），我将勾选：）您能提供更多的代码示例吗？数据是如何作为道具传递的？您如何防范潜在的不可用（尚未）数据？能否向我们展示您如何将道具传递给

项目

？此外，还可以显示

console.log（props）

在

Projects

组件中打印的内容。

props

将始终在react组件中定义（如果它实际定义为有一个），第一个条件是多余的。

export default function Projects({ children, ...props }) {

  return (
    <div>
      <div>
        <div className={styles.text}>
          <p>{props.description}</p>
          <ul>
            {
                /** Ternary statement to show components when props.features is a truthy value 
                    or loading when a falsy value **/
                props.features ? 
                    props.features.map((feature) => (
                        <li>{feature}</li>
                    )) :
                    "Loading..."
            }
          </ul>
        </div>
      </div>
    </div>
  );
}