React Select - Redux 的默認值不起作用

Question

我有來自 Redux 的這種格式的數據：

[
0: {value: '1.5', label: 'Extra cheese'}
1: {value: '3', label: 'Tomato'}
]

我嘗試將它們加載到我的反應選擇中。 但它失敗了，因為它立即將 initialToppings 作為 defaultValue 加載（所以它向我顯示空字符串作為 defaultValue）。 而且這個值永遠不能再改變了。 但是沒有initialToppings我什么都沒有得到defaultValue bcs redux變慢並且defaultValue是空的，所以我以后不能再次加載它......

const initialToppings = [{ label: '', value: '' }];

const [defaultToppings, setDefaultToppings] = useState(initialToppings);

  useEffect(() => {
    setDefaultToppings(
      editProduct?.selectedToppings?.map((topping, value) => ({
        ...topping,
        value,
      })) ?? initialToppings
    );
  }, [editProduct]);

<Select
 options={extraOptions}
 formatOptionLabel={formatExtras}
 isMulti
 defaultValue={defaultToppings}
 // defaultValue={[
 //   { label: 'Test 1', value: '1' },
 //   { label: 'Test 2', value: '2' },
 // ]}
 onChange={setSelectedToppings}
/>

Answer 1

您可以將key道具添加到Select以強制重新安裝組件並使其重新渲染

<Select
    key={defaultToppings}
    options={extraOptions}
    formatOptionLabel={formatExtras}
    isMulti
    defaultValue={defaultToppings}
    // defaultValue={[
    //   { label: 'Test 1', value: '1' },
    //   { label: 'Test 2', value: '2' },
    // ]}
    onChange={setSelectedToppings}
/>

我有一個簡單的代碼框，你可以檢查一下