React Select 不根据defaultValue改变Label

Question

import React from "react";
import { useState } from "react";
import Select from "react-select";

const EditMitarbeiter = () => {
    const optionsField1 = [
        { id: "1", value: "test1", label: "Test1"},
        { id: "2", value: "test2", label: "Test2"},
        { id: "3", value: "test3", label: "Test3"},
        { id: "4", value: "test4", label: "Test4"},
    ];
    
    const[functions, setFunctions] = useState([
        {field1:"test1",field2:"test2",field3:"test3",input:"Test"}
    ]);

    const handleFunctionAdd = () => {
        setFunctions([...functions, {field1:"",field2:"",field3:"",input:""}]);
    };

    const handleFunctionRemove = (event, index) => {
        event.preventDefault(); // verhindert Default Verhalten von Button, ist somit kein "Submit-Button" mehr und lädt Seite nicht neu
        console.log(index); // FEHLER: este Funktion wird nicht entfernt, sondern folgende
        const list = [...functions];
        list.splice(index,1);
        setFunctions(list);
    };

    const handleFunction1Change = (event, index) => {
        const newFunctions = [...functions];
        newFunctions[index].field1 = event.value;
        setFunctions(newFunctions);
    }

    return (
        <div>
            <div id="content">
                <form id="Funktion">
                    <legend>Funktionen</legend>
                        {functions.map((f,index) => (
                            <div key={index} id="function-box">
                                <div class="ReactSelect"><Select options={optionsField1} defaultValue={f.field1} onChange={(event) => handleFunction1Change(event,index)}/></div>
                            </div>
                        ))}
                </form>
            </div>
        </div>
    );
}

export default EditMitarbeiter;

我遇到的问题是我的 ReactSelect 标签没有改变并且保持空白。我已经查看了一些类似的问题，但我无法弄清楚为什么即使我使用了其他问题的解决方案，我的示例也不起作用。

还有一个附带问题，是否值得在普通 HTMLSelect 上使用 ReactSelect，因为我只是遇到了 ReactSelect 的问题...

Answer 1

f.field1 = "测试1" 以默认值呈现

defaultValue="test1"

但默认值必须是这样的

defaultValue={{label:"xyz",value:"xyz"}}

烦你，这个行

 defaultValue={optionsField1.find((d) => d.value === f.field1)}

React Select 不根据defaultValue改变Label

React Select does not change Label according to defaultValue

html

javascript

reactjs