时间戳

首页 > 解决方案 > 如何在文本字段值中映射具有特定 ID 的日期？

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

问题描述

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

在数组中，会有许多具有相同 id 的对象，我想在 中映射具有相同 id 的日期TextField，请参见下面的代码。我该如何做到这一点？

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>
         );

标签： reactjstypescriptmaterial-uireact-hookstsx

解决方案

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

UUID（通用唯一标识符）是一个 128 位数字，用于唯一标识 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

推荐阅读