React Hook Form's useFieldArray cannot display data
P粉176151589
2023-09-01 23:30:48
<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>When I submit the form, the values in the fields array do not display data, while other fields outside the fields array work fine. </p>
<p>This is the code for the component. </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>I can add and remove fields, but when submitted, the values don't show up. Don't know why, please help me. </p>
<p>The hooks and functions I'm using.</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>
You should both register and name the property with the same name like this:
React Hook Form requires you to add an index in the array name because it uses dot notation to access nested fields. For example, suppose you have an array of objects like this:
The name of each input should then match the path to the field in the form data. For example, the first ticket category name input should have the name
ticketCategory.0.ticketCatName
and the second ticket category price input should have the nameticketCategory.1.ticketCatPrice
. In this way, React Hook Form can control input values into form data.