Javascript React useState：如何使用onChange（输入）和OnClick（按钮）更新useState？

我试图更新useState钩子，但对象返回空。我尝试过使用类似的东西：

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>
  );
}

导出默认函数搜索（）{
const[filter，setFilter]=useState（{name:“匈牙利”}）；
const{data，loading，error}=useQuery（获取国家信息{
变量：{filter}，
});
如果（装载）{
返回；
}
if（error）返回error
；
const userReq={
名称：“”
}
函数onChangeHandler（e）{
const userReq={name:e.target.value}
返回用户请求
};
const onClickHandler=（e）=>{
setFilter（userReq）
} 
返回(
获取信息

关于国家！
搜寻
{data？.Country？[0]&&}
);
}

您的设置过滤器错误，您正在使用：

setFilter(name: e.target.value)

应该是：

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

因此，下面的代码应该可以工作，您不需要

'userReq'

变量：

函数onChangeHandler（e）{
setFilter（{name:e.target.value}）；
}
const onClickHandler=（e）=>{
控制台日志（过滤器）；
};

如果您希望onChange内联：

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

---

您的setFilter错误，您正在使用：

setFilter(name: e.target.value)

应该是：

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

因此，下面的代码应该可以工作，您不需要

'userReq'

变量：

函数onChangeHandler（e）{
setFilter（{name:e.target.value}）；
}
const onClickHandler=（e）=>{
控制台日志（过滤器）；
};

如果您希望onChange内联：

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

---

你可能想要两个独立的州

保存当前筛选器的状态

保存当前用户输入的状态

单击按钮，您希望将用户的输入与过滤器同步

看看你的代码，我想你已经明白了这一点，所以只要把你的

userReq

设置为一个状态就可以解决你的问题

基本上改变了这一点

 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 })
  };

---

你可能想要两个独立的州

保存当前筛选器的状态

保存当前用户输入的状态

单击按钮，您希望将用户的输入与过滤器同步

看看你的代码，我想你已经明白了这一点，所以只要把你的

userReq

设置为一个状态就可以解决你的问题

基本上改变了这一点

 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 })
  };

---

当

onChange

事件将保持

input

和

filter

的值同步时，没有按钮的意义。您可以在

onChangeHandler

和

onClickHandler

中更新输入值，对输入字段的值执行您想要执行的操作，例如：触发API请求等。当

onChange

事件将保持

input

和

filter

的值同步时，没有按钮的意义。您可以在

onChangeHandler

和

onClickHandler

中更新输入值，对输入字段的值执行您想要执行的操作，例如：触发API请求等。