reactjs - 我在选择选项上选择新项目后Useeffect不更新

问题描述

我更改了选项，但使用效果没有更新输入。请指导我在哪里出错。首先我使用 useEffect 来设置货币，然后我使用映射为 getCurrency 将其添加到 Select 选项上。onCitySelect 我在更改 Select 选项时将其添加到 setSelectedId 中。最后，我尝试使用 api 获取地址，但问题是我需要更改 api/address?currency=${selectId.id}` 我添加了 selectedId.id 但每次我更改选项选择它都不会影响并使用 useEffect 更新。我尝试了不同的解决方案无法做到。我如何更新 useEffect eveytime 选项选择更改（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>
  );
}

标签： reactjsnext.jsuse-effectsetstate

reactjs - 我在选择选项上选择新项目后Useeffect不更新

问题描述

解决方案

推荐阅读