循环作为道具发送的数组时，React 不会渲染子组件数据答案

【问题标题】：React does not rendar child component data when looping an array sent as a prop循环作为道具发送的数组时，React 不会渲染子组件数据
【发布时间】：2021-07-06 17:16:26
【问题描述】：

我是 React 新手，正在尝试将对象数组传递给子组件。但是子组件什么也不渲染。下面是我的代码

This is my array in home.js

board: [
  {
    name: 'todo',
    tasks: [
      {
        description: '',
        name: 'first task',
        id: uuid(),
        userAssigned: null
      },
      {
        description: '',
        name: 'second task',
        id: uuid(),
        userAssigned: null
      },
      {
        description: '',
        name: 'and thrid',
        id: uuid(),
        userAssigned: null
      }
    ]
  },
  {
    name: 'in-progress',
    tasks: [
      {
        description: '',
        name: 'first task',
        id: uuid(),
        userAssigned: null
      }
    ]
  },
  {
    name: 'done',
    tasks: [
      {
        description: '',
        name: 'first task',
        id: uuid(),
        userAssigned: null
      }
    ]
  }
],

这就是我渲染数组的方式

<Row>
  {
    this.state.board.map(cname => (
      <Col key={cname.name} md="2">
        <Card border="dark">
          <Card.Title className="text-center py-2 mb-0">{cname.name}</Card.Title>
          <Card.Text>
            <Task tasks={cname.tasks} />
          </Card.Text>
        </Card>
      </Col>
    ))
  }
</Row>

所以这里Task是一个子组件它如下

import React, { Component } from 'react';
import {Card} from 'react-bootstrap';


class TaskCard extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <template>
        {
          this.props.tasks.map(element => {
            <Card border="dark">
              <Card.Text>{element.name}</Card.Text>
            </Card>
          })
        }
      </template >

    );
  }
}

export default TaskCard

现在在上面的子组件代码中，它不显示数组中所述的任务名称。我需要在卡片文本中显示任务-> 名称。

【问题讨论】：

标签： reactjs react-component

【解决方案1】：

您在 map 函数中缺少 return 语句。这就是卡片没有显示的原因。

{
    this.props.tasks.map(element => {
        return (
            <Card border="dark">
                <Card.Text>{element.name}</Card.Text>
            </Card>
       )
    })
}

您也可以按照与板阵列映射相同的方式进行操作：

{
    this.props.tasks.map(element => (
        <Card border="dark">
            <Card.Text>{element.name}</Card.Text>
        </Card>
    ))
}

【讨论】：

它给出了一个错误Error: Objects are not valid as a React child (found: object with keys {description, name, id, userAssigned}). If you meant to render a collection of children, use an array instead.
这个错误应该不会发生，因为你只显示element.name。

【解决方案2】：

render() {
return (
  <template>
    {
      this.props.tasks.map(element => (
        <Card border="dark">
          <Card.Text>{element.name}</Card.Text>
        </Card>
      ))
    }
  </template >
);

}

在地图循环中使用括号而不是花括号来呈现 JSX 内容。

以下代码在我这边运行。

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [color, setColor] = useState(true);
  const board = [
   {
    name: "todo",
     tasks: [
     {
      description: "",
      name: "first task",
      id: 12,
      userAssigned: null
    },
    {
      description: "",
      name: "second task",
      id: 23,
      userAssigned: null
    },
    {
      description: "",
      name: "and thrid",
      id: 34,
      userAssigned: null
    }
  ]
},
{
  name: "in-progress",
  tasks: [
    {
      description: "",
      name: "first task",
      id: 45,
      userAssigned: null
    }
  ]
},
{
  name: "done",
  tasks: [
    {
      description: "",
      name: "first task",
      id: 56,
      userAssigned: null
    }
   ]
  }
 ];

return (
  <div className="App">
     <h1>Hello CodeSandbox</h1>

     {board.map((element) => (
       <Task tasks={element.tasks} key={element.id} />
     ))}
  </div>
 );
}

function Task({ tasks }) {
  return (
    <div>
      {tasks.map((e) => (
        <h3 key={e.id}>{e.name}</h3>
      ))}
    </div>
   );
}

【讨论】：