Javascript 使用.map在React中为循环加倍

我正在尝试为我创建的一些JSON内容创建一个双for循环：

"students": [
        {
          "name": "person",
          "photoURL": "https://via.placeholder.com/100x100",
          "subjects":[
            "physics",
            "math",
            "english"
          ],
          "nextClass": "August 29th, 2018"
        },
        {
          "name": "human",
          "photoURL": "https://via.placeholder.com/100x100",
          "subjects":[
            "chemistry",
            "math",
            "french"
          ],
          "nextClass": "August 27th, 2018"
        }]

在我的JSX中，我尝试循环遍历student对象，然后再次循环遍历所有主题，以生成一个无序列表：

render(){

    return(
          <div id="display-students">
            {this.props.students.map((x,i) =>{
              return (
                <div className="student" key={i}>
                  <h2>{x.name}</h2>
                  <img src={x.photoURL} alt="profile"/>
                  <h3>Subjects: </h3>
                  <ul>
                      {x.subjects.map((y) => <li>{y}</li>)}
                  </ul>
                </div>  
              )
            })} 
          </div>
        )
   }

render（）{
返回(
{this.props.students.map（（x，i）=>{
返回(
{x.name}
学科：

{x.subjects.map（（y）=>
{y}
）}

)
})} 
)
}

但是，此错误会显示在浏览器中：

当我尝试渲染时

<ul>
    {x.subjects}
</ul>

{x.subjects}

我看到数组中的内容都混合成一个字符串：

有关于为什么会发生这种情况的指示吗？ 我们甚至可以在JSX中使用double for循环吗

---

提前谢谢

我尝试了同样的逻辑。它在下面的编译器中工作得非常好

让学生=[
{
“姓名”：“人”，
“photoURL”：https://via.placeholder.com/100x100",
“主题”：[
“物理学”，
“数学”，
“英语”
],
“nextClass”：“2018年8月29日”
},
{
“姓名”：“人类”，
“photoURL”：https://via.placeholder.com/100x100",
“主题”：[
“化学”，
“数学”，
“法语”
],
“nextClass”：“2018年8月27日”
}]
常量组件=（道具）=>{
返回(
{props.students.map（（x，i）=>{
返回(
{x.name}
学科：

{x.subjects.map（（y）=>
{y}
）}

)
})} 
)
}
ReactDOM.render（，document.querySelector（#app））

我找到了解决方案！ 我想问题不在于

.map

问题，而在于未能完全理解我的生命周期方法

x.subjects

是一个数组，但是它在第一次渲染时未定义，因为前端尚未收到来自后端的响应

为了解决这个问题，我做了如下工作：

<ul>
   {x.subjects === undefined ? "loading..." : x.subjects.map((y, j) => <li key={j}>{y}</li>)}
</ul>

{x.subjects===未定义？“加载…”：x.subjects.map（（y，j）=>
{y}
）}

这允许第一次渲染避免失败

这让我想到了另一个切线，想知道这是否是加载初始状态的正确方法。现在我：

• 在组件中的异步调用（使用redux thunk）中分派操作
• 这将更新存储并将数据向下传递到道具中
• 一旦这样做，组件就会重新呈现，显示从后端接收到的数据

---

我想知道是否有更好的方法来实现这一点…

双循环可以。我已经获取了您的精确代码和数据集，并且能够呈现

ul

非常好。这是整个数据集吗？如果您的内容都聚合在一个字符串中，这可能是因为您没有解析JSON数据。绳子到底在哪里？X是字符串吗？如果是的话，你应该做JSON.parse（x），但是它首先不应该是一个字符串，所以无论提供给你什么道具，都是给你一个字符串数组，而不是JSON对象数组。我不确定这是否值得回答，因为解决方案似乎可以在你的api中。但我认为@kyle可能有什么发现。尽管如此，如果您想返回json，我通常在后端使用

express

时使用

res.json（jsonDataHere）

。我的第一个想法是：也许有些学生没有任何科目（

科目

不存在）。但是第二，您可以使用

console.log（typeof x.subjects）

来调试它，没有更多的信息，我没有主意了，尤其是因为您这里的示例工作得非常好。我猜这与你如何模仿你的api响应有关，可能与组件本身没有问题。我的意思是@Joao可能也是对的，他提出了一个很好的观点，每个学生都明确定义了主题吗？如果他们没有，至少是一个空数组吗？你可以将道具设置为一种状态。然后在构造函数上可以初始化stateName:[]从那里可以看到它永远不会是未定义的，默认情况下它将是一个空数组