如何遍历对象内部的数组并在反应组件中渲染它

编程问答 2022-05-02

问题描述

我想遍历对象内部的数组并提取数据以在反应组件中呈现。但我不知道如何使用映射到对象内部的数组。我试了很多方法都行不通

const [emailData,setEmailData] = useState("");

res?.data.emails.map((email) =>  
    setEmailData(
        <Table.Row>
            <Table.Cell>{email.emailed_to}</Table.Cell>
            <Table.Cell>{email.notes}</Table.Cell>
            <Table.Cell>{email.created_at}</Table.Cell>
        </Table.Row>
    );
);

return ({ emailData });

解决方法

您可以使用 Object functions 来包装您的对象。

const object1 = {a: 1,b: 2,c: 3}

它有 3 个版本：

  • 键：Object.keys(object1) 返回所有键的数组 => [a,b,c]
  • 值：Object.values(object1) 返回所有值的数组 => [1,2,3]
  • 条目：Object.entries(object1) 以数组数组的形式返回所有条目的数组=> [[a,1],[b,2],[c,3]]

最后一个可以这样使用

Object.entries(object1).map(([key,value]) => ....)
javascript-objectsloopsreactjsreactjsreactjsreactjs