每个对象都单独存储在useState React | 如何存储在数组中?

Question

我编写了一个动态表单的代码，其代码如下，但我的问题是将其存储在 useStateformFields中，它存储在数组中/每个对象都单独存储，但我希望它们存储在数组question中。

这是我的输入：

[
{ titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }
]

但我想像这样：

{
"quetions": [
{ titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }

],
}

这是我的所有代码：

const [formFields, setFormFields] = useState([])
// Add Question
const handleFormChange = (event, index) => {
let data = [...formFields];
// data[index][event.target.name] = event.target.value;
setFormFields(data);
}
const submit = (e) => {
e.preventDefault();
console.log(formFields)
}
const addFields = () => {
let object = {
titleQuestion: '',
metric: '',
subMetrico:''
}
setFormFields([...formFields, object])
}
const removeFields = (index) => {
let data = [...formFields];
data.splice(index, 1)
setFormFields(data)
}

和：

<div className="App">
<form onSubmit={submit}>
{formFields.map((form, index) => {
return (
<div key={index}>
<input
name='titleQuestion'
onChange={event => handleFormChange(event, index)}
value={form.titleQuestion}
/>
<input
name='metric'
onChange={event => handleFormChange(event, index)}
value={form.metric}
/>
<input
name='subMetric'
onChange={event => handleFormChange(event, index)}
value={form.subMetric}
/>
<button onClick={() => removeFields(index)}>Remove</button>
</div>
)
})}
</form>
<button onClick={addFields}>+</button>
<br />
<button onClick={submit}>submit</button>
</div>

更新：

{
"quetions": [
{ titleQuestion: "aaa", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "bbb", metric: "bbb", subMetrico: "ccc" },
{ titleQuestion: "ccc", metric: "bbb", subMetrico: "ccc" }
],
"post_id":10
}

Answer 1

您需要更改以下函数，以便将数组存储在对象的questions键内

const [formFields, setFormFields] = useState({})
// Add Question
const handleFormChange = (event, index) => {
let data = [...formFields.quetions];
// data.quetions[index][event.target.name] = event.target.value;
setFormFields({ quetions: data });
}
const addFields = () => {
let object = {
titleQuestion: '',
metric: '',
subMetrico:''
}

if(formFields.quetions)
setFormFields({ quetions: [...formFields.quetions, object] });
else 
setFormFields({ quetions: [object] });
}
const removeFields = (index) => {
let data = [...formFields.quetions];
data.splice(index, 1)
setFormFields({ quetions: data })
}