arrays - React 中的地图过滤器。对象作为 React 子级无效。如果您打算渲染一组孩子，请改用数组

Question

function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    return(
        <main>
            <div>
                /* display person age equal to 27 using filter using ES6 arrow */
                {people.filter(person => person.age == 27)}
            </div>
        </main>
    )
}

我对反应和使用map而不是普通的循环函数很陌生。

当我运行这段代码时，它给了我这个错误（如下所示）

你们能教我在按年龄等于 27过滤时如何显示一个人的所有数据的正确方法吗？

Answer 1

您尝试返回一个对象，这是不可能的。

function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    const filterdPeople = people.filter(person => person.age == 27)

    return(
        <main>
            <div>
                {filterdPeople.map(person => {
                  return (
                    <div key={person.lastName}>
                      <p>First name: {person.firstName}</p>
                      <p>Last name: {person.lastName}</p>
                      <p>Age: {person.age}</p>
                      <p>Colors: {person.colors.map(color => (<span>{`${color}, `}</span>))}</p>
                     <p>
                      <span>Body Attributes: </span>
                      <span>Weight: {person.bodyAttributes.weight}</span>
                      <span>Height: {person.bodyAttributes.height}</span>
                     </p>
                   </div>
                  )
                })}
            </div>
        </main>
    )
}

Answer 2

你必须对map数组。请参阅此文档。

对于每个人，您决定如何显示每个字段，这里我使用了<p>标签，您可以在表格中或自定义卡片中显示它们。您的选择！

请记住，{}括号内是 Javascript 表达式，而在()JSX 中，与HTML您看到的标签非常相似！

阅读文档，按照教程进行操作，会有很大帮助！

{people.filter(person => person.age == 27).map(person => { return(
    <div>
      <p>First name: {person.firstName}</p>
      <p>Last name: {person.lastName}</p>
      <p>Age: {person.age}</p>
      <p>Colors: {person.colors.map(color => (<span>{color+" "}</span>)}</p>
      <p>
        <span>Body Attributes: </span>
        <span>Weight: {person.bodyAttributes.weight}</span>
        <span>Height: {person.bodyAttributes.height}</span>
      </p>
    </div>
)})}

Answer 3

function Main(){
    // create an array that holds objects
    const people = [
        {
            firstName: 'Fathi',
            lastName: 'Noor',
            age: 27,
            colors: ['red', 'blue'],
            bodyAttributes: {
                weight: 64,
                height: 171
            }
        },
        {
            firstName: 'Hanafi',
            lastName: 'Noor',
            age: 26,
            colors: ['white', 'black'],
            bodyAttributes: {
                weight: 62,
                height: 172
            }
        }
    ]

    return(
        <main>
            <div>
                /* display person age equal to 27 using filter using ES6 arrow */
                <table>
                <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>age</th>
                <th>colors</th>
                <th>bodyAttributes<th>
                </tr>
                {people.filter(person => person.age == 27).map(item=>{
                    return(
                        <tr>
                           <td>{item.firstName}</td>
                           <td>{item.lastName}</td>
                           <td>{item.age}</td>
                           <td>
                           <ul>
                             {
                                 item.colors.map(color=>{
                                     return <li>{color}</li>
                                 })
                             }
                           </ul>
                           {}
                           </td>
                           <td>
                           <ul>
                             <li>W:{item.bodyAttributes.weight}</li>
                             <li>H:{item.bodyAttributes.height}</li>
                           </ul>
                           </td>
                        </tr>
                    )
                })}
              </table>
            </div>
        </main>
    )
}