更新另一个相关的选择字段后，反应选择未正确更新

Question

这是我的代码：

https://codesandbox.io/s/inspiring-rhodes-jwv1zd?file=/src/App.js

要重现问题：

1. 从第一个选择字段中选择水果。
2. 接下来，从第二个字段中选择一个水果。
3. 接下来，再次将第一个字段值从水果更改为蔬菜，当我将其更改为蔬菜时，第二个字段上的选项将更新为蔬菜列表，但它仍然显示之前的水果为所选水果。我该如何解决？我想从蔬菜中选择第一个选项。

Answer 1

我已经检查了您的代码并对文件进行了更新。 首先，AppCreatableSelect.jsx组件中应该有ref属性。

这是更新AppCreatableSelect.jsx 组件代码。

import React, { forwardRef } from "react";
import { Controller } from "react-hook-form";
import ReactSelect from "react-select";

const AppCreatableSelect = forwardRef(
  (
    {
      control,
      options,
      fieldName,
      defaultValue,
      errors,
      className,
      selectClassList,
      isSearchable = true,
      isClearable = true
    },
    ref
  ) => {
    return (
      <>
        <Controller
          name={fieldName}
          className={`form-control ${className} ${
            errors[fieldName] ? "is-invalid" : ""
          }`}
          control={control}
          defaultValue={
            options.length && options.find((row) => row.value === defaultValue)
          }
          selected={true}
          render={({ field: { onChange, onBlur, name } }) => (
            <ReactSelect
              ref={ref}
              isClearable={isClearable}
              onBlur={onBlur} // notify when input is touched
              inputRef={ref}
              defaultValue={
                options.length &&
                options.find((row) => row.value.value === defaultValue)
              }
              onChange={onChange}
              options={options}
              className={selectClassList}
              isSearchable={isSearchable}
            />
          )}
        />
      </>
    );
  }
);

export default AppCreatableSelect;

这是更新后的App.js 组件代码。

import "./styles.css";
import AppCreatableSelect from "./component/AppCreatableSelect";
import { useForm } from "react-hook-form";
import { useEffect, useState, useRef } from "react";

export default function App() {
  const [types, setTypes] = useState([]);
  const [items, setItems] = useState([]);
  const [colors, setColors] = useState([]);

  const itemsRef = useRef();
  const colorsRef = useRef();

  const {
    control,
    watch,
    formState: { errors }
  } = useForm();

  const watchType = watch("types");
  const watchItems = watch("items");

  useEffect(() => {
    setTimeout(() => {
      setTypes([
        { label: "Fruits", value: "fruits" },
        { label: "Vegetables", value: "vegetables" }
      ]);
    });
  }, []);

  useEffect(() => {
    if (watchType) {
      if (watchType.value === "fruits") {
        setItems([
          { label: "Apple", value: "apple" },
          { label: "Orange", value: "orange" }
        ]);
        itemsRef.current.setValue({ label: "Apple", value: "apple" });
      }
      if (watchType.value === "vegetables") {
        setItems([
          { label: "Cabbage", value: "cabbage" },
          { label: "Cauliflower", value: "cauliflower" }
        ]);
        itemsRef.current.setValue({ label: "Cabbage", value: "cabbage" });
      }
    }
  }, [watchType]);

  useEffect(() => {
    if (watchItems) {
      if (watchItems.value === "apple") {
        setColors([
          { label: "Red Apple", value: "redApple" },
          { label: "Green Apple", value: "greenApple" }
        ]);
        colorsRef.current.setValue({ label: "Red Apple", value: "redApple" });
      }
      if (watchItems.value === "orange") {
        setColors([
          { label: "Red Orange", value: "redOrange" },
          { label: "Green Orange", value: "greenOrange" }
        ]);
        colorsRef.current.setValue({ label: "Red Orange", value: "redOrange" });
      }
      if (watchItems.value === "cabbage") {
        setColors([
          { label: "Red Cabbage", value: "redCabbage" },
          { label: "Green Cabbage", value: "greenCabbage" }
        ]);
        colorsRef.current.setValue({
          label: "Red Cabbage",
          value: "redCabbage"
        });
      }
      if (watchItems.value === "cauliflower") {
        setColors([
          { label: "Red Cauliflower", value: "redCauliflower" },
          { label: "Green Cauliflower", value: "greenCauliflower" }
        ]);
        colorsRef.current.setValue({
          label: "Red Cauliflower",
          value: "redCauliflower"
        });
      }
    }
  }, [watchItems]);

  return (
    <div className="App">
      <AppCreatableSelect
        control={control}
        options={types}
        fieldName="types"
        errors={errors}
        isClearable={false}
        defaultValue={types[0]}
      />

      <AppCreatableSelect
        ref={itemsRef}
        control={control}
        options={items}
        fieldName="items"
        errors={errors}
        isClearable={false}
        defaultValue={items[0]}
      />

      <AppCreatableSelect
        ref={colorsRef}
        control={control}
        options={colors}
        fieldName="itemColor"
        errors={errors}
        isClearable={false}
      />
    </div>
  );
}