如何在文本字段值中映射具有特定 ID 的日期？

Question

我有一个数组，其中包含名为 dates 的对象，数组中一个对象的示例：{id: 9898, date: 10/06/2020}。

在数组中，会有很多相同id的对象，我想映射TextField中相同id的日期，见下面的代码。我该如何实现？

感谢任何帮助，谢谢！

import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { TextField, Box, Button, Tooltip } from '@material-ui/core';

   return(
           <div>
                {dates.map(dateValue => (
                    <div>
                        <TextField label="Date" value={dateValue.date} fullWidth />
                        <Box mt="1.5rem" />
                    </div>
                ))}
                    <div>
                        <TextField
                            name="date"
                            id="date"
                            label="New date"
                            inputRef={register}
                            fullWidth />
                    </div>
                <Box mt="1.5rem" />
            </div>
         );

Answer 1

有一个选项可以使用 uuid，例如 react-uuid

A UUID (Universal Unique Identifier) is a 128-bit number used to uniquely identify some object or entity on the Internet.

import uuid from "react-uuid";

const udates = dates.map(x => ({ ...x, uuid: uuid() }));

<div key={dateValue.uuid} ... />

您也可以使用uuid

import {v5 as uuid} from "uuid";

他们有打字稿支持@types/uuid

如何在文本字段值中映射具有特定 ID 的日期？

How do I map dates with a specific ID in textfield value?

typescript

reactjs

material-ui

tsx

react-hooks