如何在 React 的选择标签（下拉菜单）中动态添加项目到选项

Question

我正在制作一个动态表单组件，它从用户那里获取输入并将其存储为 JSON 格式，然后为最终用户创建一个表单。 我必须动态添加值以选择标签选项，但出现一个错误 TypeError: data.emplist is not iterable

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没有像Array那样定义Symbol.iterator 。 这意味着您不能迭代对象。

如果您想按照问题中的说明动态地将新项目添加到 React 中的选择中，您应该将输入更改的结果存储在一个状态中，并且无论何时需要（如表单提交），您都可以添加这个项目数组中的项目，其中包含动态选项，每当此状态更改时，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;