React 项目对象列表用filter筛选嵌套任务后无法渲染怎么解决？

问题原因 #

• JSX中调用forEach遍历项目数组，forEach本身无返回值，执行后返回undefined，React无法渲染该值对应的内容
• 内层tasks.map生成的JSX结构没有向外层返回，渲染内容直接丢失
• 列表渲染未给根元素加唯一key属性，会触发控制台警告，也会影响React渲染性能

正确实现思路 #

先将所有项目下归属User1的任务提取出来合并为一维数组，再通过map遍历该数组返回对应JSX结构即可正常渲染。如果需要保留所属项目的关联信息，也可以在筛选时额外挂载项目字段到任务对象上。

修正后代码 #

const App= props => {

  const projects = [
    {
      "id": "1JEM8ivAlH073ngLtc3V",
      "team": "Engineering",
      "priority": "Highest",
      "tasks": [
        {
          "description": "Hello World",
          "status": "Open",
          "assigine": "User1",
          "priority": "Low",
          "name": "Friend"
        }
      ],
      "visibility": "Public",
      "name": "Radiance",
      "Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
      "description": "ABCDEFGHIJ"
    },
    {
      "id": "dHMVewmo7HYfUSgqDwhH",
      "team": "Engineering",
      "tasks": [
        {
          "name": "Implement adapter ",
          "status": "Open",
          "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
          "priority": "Highest",
          "assigine": "User1"
        },
        {
          "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n\n",
          "priority": "Medium",
          "name": "Replace old text with new text",
          "status": "Doing",
          "assigine": "User2"
        },
        {
          "priority": "Highest",
          "description": "Loreum ipsum de djdasjknkajcnkjcnskax",
          "assigine": "User1",
          "name": "SOL Mail",
          "status": "Open"
        }
      ],
      "description": "ABCDEFGHIJ",
      "Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
      "visibility": "Public",
      "name": "Friend",
      "priority": "Highest"
    },
    {
      "id": "2Ld5Afb5Q9TNtqsNRfmc",
      "priority": "Highest",
      "description": "The react-router-dom package contains bindings for using React Router in web applications. Please see the Getting Started guide for more information on how to get started with React Router.",
      "name": "Developers DAO",
      "tasks": [
        {
          "name": "Fix Deprecated libraries",
          "status": "Open",
          "assigine": "User1",
          "description": "Implement Dashboard ",
          "priority": "Highest"
        },
        {
          "description": "Fix Deprecated libraries",
          "name": "Dikiri Dikiri",
          "priority": "Highest",
          "assigine": "User2",
          "status": "Open",
          "visibility": "Doing"
        },
        {
          "status": "Open",
          "assigine": "User2",
          "description": "Change Authentication Mode",
          "priority": "Highest",
          "name": "SOL Mail"
        },
        {
          "priority": "Highest",
          "assigine": "User1",
          "status": "Open",
          "description": "Modification of User Interface",
          "name": "Hello World"
        },
        {
          "priority": "Medium",
          "name": "Hello Bussy",
          "description": "React routes modification",
          "assigine": "User3",
          "status": "Doing"
        },
        {
          "status": "Open",
          "assigine": "User2",
          "priority": "Highest",
          "name": "Friend",
          "description": "Hello World"
        }
      ],
      "visibility": "Private",
      "Owner": "DVcjkvnCuV59RpxxrSbnxHK9rAgfaVriXK3NX51eiv3i",
      "team": "Engineering"
    }
  ];

  // 筛选所有User1的任务，打平为一维数组
  const user1Tasks = projects.flatMap(project => 
    project.tasks.filter(task => task.assigine === "User1")
  );
  // 若环境不支持flatMap，可改用reduce实现：
  // const user1Tasks = projects.reduce((list, project) => {
  //   return list.concat(project.tasks.filter(task => task.assigine === "User1"))
  // }, [])

  return <div>
          <h1>Hello World</h1>
          {
            user1Tasks.map((row, index) => {
              // 实际业务建议用任务唯一ID作为key，此处仅做演示用index
              return <div key={index}>
                      <p>{row.name}</p>
                      <p>{row.description}</p>
              </div>
            })
          }
        </div>
}


ReactDOM.render(
    <App/>,
    document.body
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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