如何在 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;