映射时如何使用react-hook-form？答案

【问题标题】：How do I use react-hook-form when mapping?映射时如何使用react-hook-form？
【发布时间】：2021-07-26 03:24:36
【问题描述】：

所以我正在使用 React 和 Material UI。基本上，在我的状态下，我有一个如下所示的对象数组：

[{ title: string, url: string, id: string },...];

在我的页面上，我希望用户能够编辑这些，所以我设置了这样的页面：

 const links = useSelector((state: RootState) => { state.links });
 const onEdit = (data: { title: string, url: string }) => console.log(data);

 {links.map((link) => (
    <form onSubmit={handleSubmit(onEdit)} key={link.id}>
      <Grid container >

        <Grid item xs={5}>
          <TextField
            name="title"
            defaultValue={link.title}
            type="text"
            inputRef={register({
              required: {
                value: true,
              },
            })}
          />
        </Grid>

        <Grid item xs={5}>
          <TextField
            name="url"
            defaultValue={link.url}
            type="url"
            variant="outlined"
            inputRef={register({
              required: {
                value: true,
              },
            })}
          />
        </Grid>

        <Button
          className={styles.button}
          type="submit"
          data-testid="submit-button">
          Edit
        </Button>

        <Button
          onClick={() => {
            onDelete(link.id);
          }}
          data-testid="delete-button">
          Delete
        </Button>

      </Grid>
    </form>
  ))}

假设我的状态如下：

[{ title: 'google', url: 'google.com', id: '123' }, { title: 'YouTube', url: 'YouTube', id: '456' }, { title: 'Facebook', url: 'Facebook', id: '789' }]

react 组件会将这些值渲染到文本字段中，用户可以直接更改它并单击编辑以更新状态。

问题是，当我尝试单击任何呈现的表单的编辑按钮时，它总是控制台 { title: 'Facebook', url: 'Facebook' } 而我希望它根据单击哪个表单的编辑按钮来控制台值。

希望这很清楚，谢谢！

【问题讨论】：

标签： reactjs forms react-hook-form

【解决方案1】：

正如在编辑时所理解的那样，您只需要在控制台中显示特定项目的标题和 url，您就拥有了项目，即。链接

和onDelete中的link.id类似，通过onEdit可以传递链接对象onEdit(link)

const onEdit = (data) => console.log(data);

【讨论】：