功能组件中的 react-hook-form react-select 给出警告

Question

我正在使用 react-select 5.2.2、reack-hook-form 7.19.5 和 react 17.0.2

除了我在 react-select 下拉列表中的 select 值之外，我的组件中的一切工作正常，它会在控制台中引发以下警告：

组件正在将受控输入更改为不受控。 这可能是由于值从定义变为未定义引起的，这不应该发生。 决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

这是我的组件代码

const [selectedOption, setSelectedOption] = useState(undefined);
const { data: userAreas } = useQuery(GET_AREAS);

const areasList = userAreas && userAreas.getAreasList.map((obj) => {
    const rObj = {};
    rObj.areaValue = obj;
    rObj.label = obj;
    return rObj;
  });

<Label>Area</Label>
          <Controller
            name="area"
            control={control}
            rules={{ required: 'Area is required' }}
            render={({ field }) => (
              <ReactSelect
                isClearable
                {...field}
                placeholder="Select Your Area"
                value={selectedOption}
                onChange={setSelectedOption}
                options={areasList}
              />
            )}
          />

{areasList} 来自 graphql useQuery 所以最初它是未定义的，直到它在后续渲染中接收到数据

Answer 1

您正在将不可控组件更改为可控组件

检查此文档

该值在第一次渲染时未定义，因此它是不可控的，然后值被更改并且您的组件变得可控

value 属性应该是这样的

selectedOption?? <empty data here>