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

Posted 2023-03-17

【中文标题】我在选择选项上选择新项目后Useeffect不更新

【英文标题】：Useeffect not update after i select new item on Select option

【发布时间】：2021-10-26 11:41:33

【问题描述】：

我更改了选项，但使用效果没有更新输入。请指导我在哪里出错。首先我使用 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_URLapi/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_URLapi/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>
  );

【参考方案1】：

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

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

【讨论】：

感谢您的帮助。当我添加目标时，它给出了错误。

【参考方案2】：

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

由于你指定了一个空的依赖数组，钩子只在组件的初始渲染上运行。

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

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

【讨论】：

谢谢它有效。我尝试使用 getCurrency 而不是 selectId.id ))