如何在React中动态地将项目添加到选择标签(下拉)的选项中

Question

我正在制作一个动态表单组件，它从用户和将其存储为JSON格式，然后为最终用户创建表单。我有要动态添加值以选择标记选项，但有一个错误是coming TypeError: data。empist是不可迭代的

const addNewEmp=()=>{
61 |     setEmpList((data)=>({
62 |         inputValue: '',
> 63 |         emplist: [
| ^  64 |             ...data.emplist,
65 |             {
66 |                 empName: data.inputValue

我已经做了一些改变，但不知道哪里错了。我的代码在

import React, { useState } from 'react'
const Select = () => {
const [inputValue,setInputValue] = useState('')
const [emplist, setEmpList] = useState([
{
empName: '---Select---'
}
]);

const  addNewEmp=()=>{
setEmpList((data)=>({
inputValue: '',
emplist: [
...data.emplist,
{
empName: data.inputValue
}
]
}))
}
let empRecords = emplist.map((data) => {
return <option>{data.empName}</option>;
});
return (
<>

<input
type="text"
placeholder="add options"
onChange={(e)=> setInputValue(e.target.value)}
/>
<button onClick={addNewEmp}>Add +</button>
<br />
<select>{empRecords}</select>
{inputValue}

</>
);
}
export default Select

Answer 1

您的addEmpList函数覆盖了您的empList的旧值，该值以Object的Array开始。这就是为什么你会得到这个错误，因为在你添加一个新项目后，你不能再迭代它，因为Object没有Symbol.iterator的定义，因为Array没有。这意味着你不能迭代一个对象。

如果你想在React中动态地添加一个新项到select中，你应该将你的输入更改的结果存储在一个状态中，当你需要的时候(比如表单提交)，你可以将这个项添加到一个包含动态选项的项数组中，当这个状态改变时，React会呈现这些选项。

import React, {useState, useCallback} from "react";
const Select = () => {
const [options, setOptions] = useState([]);
const [text, setText] = useState("");
const [value, setValue] = useState("");
const handleTextChange = useCallback(changeEvent => {
setText(changeEvent.currentTarget.value);
}, [setText]);
const handleValueChange = useCallback(changeEvent => {
setValue(changeEvent.currentTarget.value);
}, [setValue]);
const handleSubmit = useCallback(submitEvent => {
submitEvent.preventDefault();
setOptions([
...options,
{
key: window.crypto.randomUUID(),
text,
value
}
]);
}, [text, value, options, setOptions]);
return (
<>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="text">
Text
</label>
<input id="text" type="text" value={text} onChange={handleTextChange} />
</div>
<div>
<label htmlFor="value">
Value
</label>
<input id="value" type="text" value={value} onChange={handleValueChange} />
</div>
<button type="submit">
Add
</button>
</form>
<select>
{options.map(currentOption => (
<option key={currentOption.key} value={currentOption.value}>
{currentOption.text}
</option>
))}
</select>
</>
);
};
export default Select;

Answer 2

无需编写data.emplist或data.inputValue，您可以直接访问这些内容

setEmpList((data)=>({
inputValue: '',
emplist: [
...emplist,
{
empName: inputValue
}
]
}))

Answer 3

答案

import React, {useState } from "react";

const Select = () => {
const [inputValue, setInputValue] = useState("");

const [emplist, setEmpList] = useState([]);

let empRecords =
emplist.length > 0 &&
emplist.map((data) => {
return (
<option value={data.empName} key={data.empName}>
{data.empName}
</option>
);
});

const addNewEmp = () => {
const addItems = {
empName: inputValue,
value: inputValue,
};

const addEmp = [...emplist];
addEmp.push(addItems);
setEmpList(addEmp);
};

return (
<>
<input
type="text"
placeholder="add options"
onChange={(e)=> setInputValue(e.target.value)}
/>
<button onClick={addNewEmp}>Add +</button>
<br />
<select>{empRecords}</select>
{inputValue}
</>
);
};

export default Select;