reactjs - 改变 api 数据时 react 选择更新值

Question

我有一个 react-select 组件，我在其中从 api 数据提交选项，每当我从 api 编辑一个人的名字时，选项中的名字会改变，但值上的名字保持不变。

我想在更改一个人的名字后更改 select 的值。

--这里我使用react-query更新一个人的名字

  const deliveryPersonUpdate = (values) => {
    const id = deliveryBoy && deliveryBoy.id;
    const params = { deliveryBoyId: id, ...values };
    updateDeliveryPerson.mutate(params, {
      onSuccess: (data) => {
        toggle();
        setDeliveryBoy(data?.delivery_boy);
        queryClient.invalidateQueries([GET_DELIVERY_BOY_LIST.name]);
        toast.success("Category Updated");
      },
      onError: (error) => {
        showErrorMessages({ error });
      },
    });
  };

  const handleSubmit = (values) => {
    deliveryPersonUpdate(values);
  };

--选择组件

<Select
 onChange={(obj) => handleChange(obj)}
                paintBg
                noOptionsMessage={noOptionsMessage}
                name="deliveryBoySelect"
                className={cx(styles.addDeliveryBoySelect)}
                defaultValue={
                  !isEmpty(data?.delivery_boys) && {
                    label: data?.delivery_boys?.[0].name,
                    value: data?.delivery_boys?.[0].id,
                  }
                }
                options={data?.delivery_boys.map((d) => ({
                  label: d.name,
                  value: d.id,
                }))}
                isSearchable
              />

--处理选择的变化

const handleChange = (e) => {
    const deliveryBoyData = data.delivery_boys.find(
      (obj) => obj.id === e.value
    );
    setDeliveryBoy(deliveryBoyData);
  };

--此处，更改人名后，选项会立即更新，但值不会更新

Answer 1

您面临的问题是您正在为选择使用 defaultValue，这意味着选择是不受控制的。任何时候 defaultValue 发生更改，select 都不会对此更改使用react，因为它不应该如此，它只是默认值。

你有两个选择:

1. 使选择受控(通过使用状态)
2. 使选择键控(通过在默认值更改时重新安装它)

至于受控选择

您必须将 defaultValue 替换为 value，但还要附加一个更改状态的 onChange 处理程序。您可能已经有了 onChange，因为它会更新 RQ 中的状态，但由于您使用的是 defaultValue，它不会传回。但是，如果您只是使用 value 我认为会出现闪烁，因为 RQ 本质上是异步的，因此用户可以看到值仍然不同步的帧。因此，为了完全做到这一点，您还必须引入同步状态。

const [value, setValue] = useState(props.value)
const onChange = (e) => {
  setValue(e.target.value)
  props.onChange(e.target.value)
}
useEffect(() => {
  setValue(props.value)
}, [props.value])

<select value={value} onChange={onChange} />

它的作用是使用 setState 保持本地状态，使用 useEffect 处理 props 的更新，并使用 value 而不是 defaultValue 感谢那个。如有必要，您也可以提升状态。

至于键控组件

如果以前的解决方案不符合人体工程学或出于任何原因不好并且组件很小，您还可以决定不保留本地状态，而是卸载组件并安装一个新实例。结果是，当值更改时，它会安装一个新组件，以便可以再次使用 defaultValue。除了添加 key 属性外，您保持选择不变。

<select key={props.value} defaultValue={props.value} onChange={onChange}>

键与值相同意味着它们将同步。当局部值改变时，它不会闪烁，因为我们没有设置value，DOM 自己更新，当props.value 最终改变时是异步方式通过 RQ，它重新创建组件，使其具有当前的 defaultValue。