React Hook Form的useFieldArray无法显示数据
<p>大家好，我使用React Hook Form和useFieldArray Hook创建了一个Material UI表单。</p>
<pre class="brush:php;toolbar:false;"><Box component="form" onSubmit={handleSubmit(submit)}>
<Grid container spacing={2}>
<Grid item xs={12} sm={12} md={12} lg={12}>
<TextField
label="Evnet Name"
fullWidth
{...register("eventName")}
name="eventName"
/>
</Grid>
<Grid item xs={12} sm={12} md={6} lg={6} alignSelf="center">
<TextField
label="Evnet Venue Name"
fullWidth
{...register("eventVenue")}
name="eventVenue"
/>
</Grid>
<Box sx={{ width: "100%" }}>
<DialogTitle
sx={{ fontWeight: "bold", textTransform: "uppercase" }}
>
Ticket Category
</DialogTitle>
</Box>
<Grid item xs={12} sm={12} md={5} lg={4}>
<TextField
label="Category"
fullWidth
{...register("ticketCatName")}
name="ticketCatName"
/>
</Grid>
<Grid item xs={12} sm={12} md={3} lg={3}>
<TextField
type="number"
label="Price"
fullWidth
{...register("ticketCatPrice")}
name="ticketCatPrice"
/>
</Grid>
<Grid item xs={12} sm={12} md={3} lg={3}>
<TextField
type="number"
label="Total"
fullWidth
{...register("ticketCatTotal")}
name="ticketCatTotal"
/>
</Grid>
This Values I am getting when I submit the form.
</Box></pre>
<p>我创建了一个动态表单组件，使用map来显示。</p>
<pre class="brush:php;toolbar:false;">{fields.map((item, index) => {
return (
<MoreFields
register={register}
key={item.id}
remove={remove}
index={index}
item={item}
control={control}
/>
);
})}</pre>
<p>当我提交表单时，fields数组中的值不显示数据，而fields数组之外的其他字段正常工作。</p>
<p>这是组件的代码。</p>
<pre class="brush:php;toolbar:false;">import { Box, Grid, IconButton, SvgIcon, TextField } from "@mui/material";
import React from "react";
import DeleteIcon from '@mui/icons-material/Delete';
import { Fragment } from "react";
const MoreFields = ({ register, remove, index, item }) => {
return (
<Fragment key={item.id}>
<Grid item xs={12} sm={12} md={5} lg={4}>
<TextField
label="Category"
fullWidth
{...register(`ticketCategory.${index}.ticketCatName`)}
name={`ticketCategory${index}.ticketCatName`}
defaultValue={item.ticketCatName}
/>
</Grid>
<Grid item xs={12} sm={12} md={3} lg={3}>
<TextField
type="number"
label="Price"
fullWidth
{...register(`ticketCategory.${index}.ticketCatPrice`)}
name={`ticketCategory${index}.ticketCatPrice`}
defaultValue={item.ticketCatPrice}
/>
</Grid>
<Grid item xs={12} sm={12} md={3} lg={3}>
<TextField
type="number"
label="Total"
fullWidth
{...register(`ticketCategory.${index}.ticketCatTotal`)}
name={`ticketCategory${index}.ticketCatTotal`}
defaultValue={item.ticketCatTotal}
/>
</Grid>
<Grid item xs={4} sm={4} md={2} lg={2} alignSelf="center">
<SvgIcon color='error' onClick={()=>remove(index)} sx={{cursor:'pointer'}}>
<DeleteIcon size="medium" />
</SvgIcon>
</Grid>
</Fragment>
);
};
export default MoreFields;</pre>
<p>我可以添加和删除字段，但是当提交时，值不会显示。不知道为什么，请帮帮我。</p>
<p>我正在使用的hooks和函数。</p>
<pre class="brush:php;toolbar:false;">const { register, handleSubmit, control } = useForm();
const { fields, append, prepend, remove, swap, move, insert } = useFieldArray(
{
control,
name: "ticketCategory",
}
);
const addFields = () => {
append({ ticketCatName: "", ticketCatPrice: "", ticketCatTotal: "" });
};
const submit = (data) => {
console.log(data);
};</pre></p>
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
1
861
你应该像这样同时使用相同的名称来注册和命名属性：
<TextField label="Category" fullWidth {...register(`ticketCategory.${index}.ticketCatName`)} name={`ticketCategory.${index}.ticketCatName`} defaultValue={item.ticketCatName} />;React Hook Form需要你在数组名称中添加索引，因为它使用点表示法来访问嵌套字段。例如，假设你有一个像这样的对象数组：
{ "ticketCategory": [ { "ticketCatName": "A", "ticketCatPrice": 10, "ticketCatTotal": 100 }, { "ticketCatName": "B", "ticketCatPrice": 20, "ticketCatTotal": 200 } ] }然后，每个输入的名称应该与表单数据中字段的路径相匹配。例如，第一个票类别名称输入应该具有名称
ticketCategory.0.ticketCatName，第二个票类别价格输入应该具有名称ticketCategory.1.ticketCatPrice。这样，React Hook Form可以控制输入值到表单数据中。