使用.map在React中使用双循环

Question

我正在尝试在React中为我创建的一些JSON内容创建一个double 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中，我试图循环遍历学生对象，然后再次遍历所有主题以创建无序列表：

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>
        )
   }

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

当我尝试渲染出来时

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

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

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

提前致谢！

Answer 1

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

let 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"
        }]
        
const Component = (props) => {

    return(
          <div id="display-students">
            {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>
        )
   }
   
   ReactDOM.render(<Component students={students} />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id="app"/>

Answer 2

我找到了解决方案！我想这个问题不像.map问题那么多，也没有完全理解我的生命周期方法。

x.subjects是一个数组，但是它在first-render上是未定义的，因为前端尚未收到来自后端的响应。

为了解决这个问题，我设法做了这样的事情：

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

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

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

• 在组件中的异步调用（使用redux thunk）中调度操作
• 这会更新商店并将数据传递到道具中
• 一旦完成，组件将重新呈现，显示从后端接收的数据

我想知道是否有更好的方法来做到这一点......