React useState：如何使用 onChange 更新我的 useState 輸入和 OnClick 按鈕？

Question

我正在嘗試更新 useState 掛鈎，但 object 返回為空。 我曾嘗試使用類似： <input onChange={e => setFilter(name: e.target.value)} >但是，它在每次擊鍵時提交，並且按鈕毫無意義，用戶無法完全完成該值（僅復制和粘貼有效）。 我究竟做錯了什么？

export default function Search() {
  const [filter, setFilter] = useState({ name: "Hungary" });
  const { data, loading, error } = useQuery(GET_COUNTRY_INFO, {
    variables: { filter },
  });

  if (loading) {
    return <Loader />;
  }
  if (error) return <p>Error</p>;

  const userReq = {
    name: ''
  }


  function onChangeHandler (e) {
    const userReq = {name: e.target.value}
    return userReq
  };

  const onClickHandler = (e) => {
    setFilter(userReq)
  } 

  return (
    <div className="body">
      <h1>
        Get Information
        <br /> about Countries!
      </h1>
      <div className="wrapper">
          <input
            className="search"
            type="text"
            id="search"
            placeholder="Enter a Country"
            onChange={onChangeHandler}
          />

          <button className="submit" name="name" type="submit" onClick={onClickHandler}>
            Search
          </button>

        {data?.Country?.[0] && <CountryInfo country={data?.Country[0]} />}
      </div>
    </div>
  );
}

Answer 1

您的 setFilter 錯誤，您正在使用：

setFilter(name: e.target.value)

應該是：

setFilter({ name: e.target.value });

因此，下面的代碼應該可以工作，並且您不需要'userReq'變量：

function onChangeHandler(e) {
    setFilter({ name: e.target.value });
}

const onClickHandler = (e) => {
   console.log(filter);
};

<input type="text" id="search" onChange={onChangeHandler} />

如果你想要 onChange 內聯：

onChange={(e) => setFilter({ name: e.target.value })}

Answer 2

你可能想要兩個不同的狀態，

1. A state 包含當前過濾器

2. 一個 state 保存當前用戶的輸入

並單擊您想要將用戶輸入與過濾器同步的按鈕

查看您的代碼，我認為您已經弄清楚了，因此只需將您的userReq state 即可解決您的問題

基本上改變這個

 const userReq = {
    name: ''
  }

  function onChangeHandler (e) {
    const userReq = {name: e.target.value}
    return userReq
  };

對此

  const [userReq, setUserReq] = useState({ name: '' })

  function onChangeHandler (e) {
    setUserReq({ name: e.target.value })
  };