0
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过滤时如何显示一个人的所有数据的正确方法吗?

4

3 回答 3

4

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


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>
    )
}
于 2020-01-20T08:51:18.313 回答
1

你必须对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>
)})}

于 2020-01-20T08:59:20.753 回答
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
            }
        }
    ]

    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>
    )
}
于 2020-01-20T09:10:29.243 回答