React中嵌套Array.map无法正常工作，请求技术支援

我看了你的代码和数据结构，问题出在这几个地方，咱们一步步来改：

错误点1：内部遍历的对象不对 #

你在内部写了data.map((cast) => ...)，但这里的data是单条电影数据对象（比如包含_id、name、cast的那个对象），不是数组，自然没法用map方法。根据你的数据结构，应该遍历data.cast这个演员数组才对。

错误点2：JSX表达式里多余的return #

在<ul>的花括号里，你写了{ return data.map(...) }，这是错误的写法——JSX的花括号里直接放表达式就行，不需要额外的return。

错误点3：缺少列表项的key属性 #

React要求列表遍历的每个元素都要有唯一的key，内部的<li>也需要加，不然会有控制台警告。

错误点4：变量没有用大括号包裹 #

cast.name直接写的话会被当成字符串显示，得用{cast.name}才能渲染变量值。

修正后的完整代码 #

displayMovies() {
  if (!this.state.body) {
    return <h2>Loading....</h2>;
  } else {
    return this.state.body.map((data) => {
      return (
        <div key={data._id}>
          <li>{data.name}</li>
          <ul>
            {data.cast.map((cast) => {
              return <li key={cast._id}>{cast.name}</li>;
            })}
          </ul>
        </div>
      );
    });
  }
}

额外小建议 #

如果你的演员数据里没有_id，也可以用索引index当key（虽然不推荐，但临时能用）：

{data.cast.map((cast, index) => {
  return <li key={index}>{cast.name}</li>;
})}

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