我们应该如何在彼此内部构建双重映射迭代

Posted 2021-04-05

const items = this.state.items.map((result, key) => {
    const eachOne = result.map((item, key) => {
        console.log(item);
        return <td> { item } </td>;
    });
    console.log(result);
    return ( <tr> { eachOn } </tr>)
});

在上面的const中，我需要显示一个对象数组的表。

数组有点像这样：

(3) [{…}, {…}, {…}]

[{id: 1, name: "jad", country: "US"},
{id: 2, name: "tony", country: "UK"},
{id: 3, name: "alain", country: "US"}]

答案

你说在第一个地图函数后你有一个对象列表，所以你可以在渲染函数中做这样的事情。（不知道为什么你需要两个地图）。您只能映射数组。

render(){
  return (
    <table>
      <tr>
       {
        this.state.items.map(result => {
        //each object on every iteration will be available in result
             return <td>{result.name}</td>
          })
       }
      </tr>
    </table>
  )
}

注意：我不确定表格如何处理html。所以可能需要围绕一些改变。

另一答案

要映射对象，您需要使用lodash映射。

这应该做的伎俩：

import { map } from 'lodash';

...

const items = this.state.items.map((result, key) => {
  const eachOne = map(result, (item, key) => {
      return <td>{item}</td>;
  });

  return (
      <tr>
        {eachOne} 
      </tr>
    )
});