在 Select 选项上 select 新项目后使用效果不更新

Question

我更改了选项但使用效果未更新输入。请指导我哪里出错了。首先，我使用 useEffect 来设置货币，然后我使用 getCurrency 的映射将其添加到 Select 选项上。 onCitySelect 我在更改 Select 选项时将其添加到 setSelectedId。最后，我尝试使用 api 获取地址，但问题是我需要更改 api/address?currency=${selectId.id}` 我添加了 selectedId.id 但每次我更改选项select 不影响useEffect更新。我尝试了不同的解决方案无法做到。我如何更新 useEffect everytime 选项 select 更改 (selectId.id)？

export default function Golum() {
  const router = useRouter();
  const dispatch = useDispatch();
  const [getCurrency, setCurrency] = useState("");
  const [getAddress, setAddress] = useState("");

  const [selectCity, setSelectCity] = useState("");
  const [selectId, setSelectId] = useState({
    id: null,
    name: null,
    min_deposit_amount: null,
  });
  const [cityOptions, setCityOptions] = useState([]);

  useEffect(() => {
    setSelectCity({ label: "Select City", value: null });
    setCityOptions({ selectableTokens });
  }, []);

  const onCitySelect = (e) => {
    if (e == null) {
      setSelectId({
        ...selectId,
        id: null,
        name: null,
        min_deposit_amount: null,
      });
    } else {
      setSelectId({
        ...selectId,
        id: e.value.id,
        name: e.value.name,
        min_deposit_amount: e.value.min_deposit_amount,
      });
    }
    setSelectCity(e);
  };

  const selectableTokens =
    getCurrency &&
    getCurrency.map((value, key) => {
      return {
        value: value,
        label: (
          <div>
            <img
              src={`https://central-1.amazonaws.com/assets/icons/icon-${value.id}.png`}
              height={20}
              className="mr-3"
              alt={key}
            />
            <span className="mr-3 text-uppercase">{value.id}</span>
            <span className="currency-name text-uppercase">
              <span>{value.name}</span>
            </span>
          </div>
        ),
      };
  });

  useEffect(() => {
    const api = new Api();
    let mounted = true;
    if (!localStorage.getItem("ACCESS_TOKEN")) {
      router.push("/login");
    }
    if (mounted && localStorage.getItem("ACCESS_TOKEN")) {
      api
        .getRequest(
          `${process.env.NEXT_PUBLIC_URL}api/currencies`
        )
        .then((response) => {
          const data = response.data;
          dispatch(setUserData({ ...data }));
          setCurrency(data);
        });
    }
    return () => (mounted = false);
  }, []);

  useEffect(() => {
    const api = new Api();
    let mounted = true;

    if (!localStorage.getItem("ACCESS_TOKEN")) {
      router.push("/login");
    }
    if (mounted && localStorage.getItem("ACCESS_TOKEN")) {
      api
        .getRequest(
          `${process.env.NEXT_PUBLIC_URL}api/address?currency=${selectId.id}`
        )
        .then((response) => {
          const data = response.data;
          dispatch(setUserData({ ...data }));
          setAddress(data.address);
        })
        .catch((error) => {});
    }
    return () => (mounted = false);
  }, []);

  return (
                <div className="row mt-4">
                  <Select
                    isClearable
                    isSearchable
                    onChange={onCitySelect}
                    value={selectCity}
                    options={selectableTokens}
                    placeholder="Select Coin"
                    className="col-md-4 selectCurrencyDeposit"
                  />
                </div>

                <div className="row mt-4">
                  <div className="col-md-4">
                  <Form>
                    <Form.Group className="mb-3" controlId="Form.ControlTextarea">
                      <Form.Control className="addressInput" readOnly defaultValue={getAddress || "No Address"} />
                    </Form.Group>
                  </Form>
                  </div>
                </div>
  );
}

Answer 1

我认为您错误地访问了 e 对象。 e 表示点击事件，您应该使用此行访问该值

e.target.value.id
e.target.value.value

Answer 2

useEffect 钩子的第二个参数是依赖数组。在这里您需要指定所有可以随时间变化的值。如果其中一个值发生变化，useEffect 挂钩会重新运行s.

由于您指定了一个空的依赖项数组，挂钩仅运行组件的初始渲染。

如果您希望 useEffect 挂钩在 selectId.id 发生变化时重新运行，请在依赖数组中指定它，如下所示：

useEffect(() => { /* API call */ }, [selectId.id]);

在 Select 选项上 select 新项目后使用效果不更新

Useeffect not update after i select new item on Select option

setstate

reactjs

next.js

use-effect