Javascript 使用react钩子时的无限循环

我是一个新手，一直在用它们做实验。我正在尝试编写一个usePostForm钩子，在那里我可以复制post状态并将其与新的post字段合并，但由于某些原因，我一直得到一个无限循环。我错过了什么

const usePostForm = field => {
  const [post, setPost] = useState({
    title: '',
    points: '',
    course: '',
    question: ''
  });

  const setFormPost = () => {
    setPost({ ...post, ...field });
  };
  return [post, setFormPost];
};

稍后在另一个函数中，我将其称为

const [post,setPost]=usePostForm()
setPost({title:'hello'})

---

请注意，

setFormPost

中缺少一个参数：

const setFormPost = field => {
  setPost({ ...post, ...field });
};

---

无限循环取决于调用

setFormPost

的位置/上下文（您应该详细说明），我猜是在

useffect

中导致渲染循环。

如何调用

setPost

是关键。在上面的示例中，每次组件重新加载时，它都会反复调用

setPost

最简单的方法是从

表单中设置值。如果使用表单元素，则可以使用
event.target
更新
useCallback
函数中的值。例如，将
useCallback
函数与
prevState
回调组合使用：

const usePostForm = () => {
  const [values, setValues] = React.useState({
    title: '',
    points: '',
    course: '',
    question: ''
  });

  const setFormPost = React.useCallback(
    ({ target: { name, value } }) =>
      setValues(prevState => ({ ...prevState, [name]: value })),
    [setValues]
  );

  return [values, setFormPost];
};

其中
名称
和
值
来自
事件。目标
：

<input type="text" name="title" value={values.title} onChange={setFormPost} />

html{
字体系列：-苹果系统，BlinkMacSystemFont，“Segoe UI”，Roboto，“Helvetica Neue”，Arial，“Noto Sans”，Sans serif，“苹果颜色表情符号”，“Segoe UI表情符号”，“Segoe UI符号”，“Noto颜色表情符号”；
字体大小：16px；
字体大小：400；
线高：1.5；
-webkit文本大小调整：100%；
背景：#fff；
颜色：#666；
}
.btn{
颜色：#fff；
边框：1px实心透明；
利润率：0.10px；
光标：指针；
文本对齐：居中；
框大小：边框框；
填充：0 30px；
垂直对齐：中间对齐；
字体大小：.875rem；
线高：38px；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
转换：.1s易入易出；
过渡属性：颜色、背景色、边框色；
}
.btn:焦点{
大纲：0；
}
.btn容器{
文本对齐：居中；
边缘顶部：10px；
}
.表格{
宽度：550px；
保证金：0自动；
}
.危险{
背景色：#f0506e；
颜色：#fff；
边框：1px实心透明；
}
.危险：悬停{
背景色：#ee395b；
颜色：#fff；
}
.错误{
保证金：0；
利润上限：-20px；
左：26%；
颜色：红色；
文本对齐：左对齐；
}
.输入{
显示：内联块；
高度：40px；
字体大小：16px；
宽度：70%；
填充：0 10px；
背景：#fff；
颜色：#666；
边框：1px实心#e5；
边框右上角半径：3px；
边框右下半径：3px；
转换：.2s易进易出；
过渡属性：颜色、背景色、边框；
}
.输入：焦点{
大纲：0；
边框：1px实心#1e87f0；
边框右上角半径：3px；
边框右下半径：3px；
}
.输入容器{
宽度：100%；
高度：60px；
边缘底部：20px；
显示：内联块；
}
.标签{
宽度：25%；
填充顶部：8px；
显示：内联块；
文本对齐：居中；
文本转换：大写；
字体大小：粗体；
高度：34px；
边框左上半径：4px；
边框左下半径：4px；
背景：rgb（238238238）；
}
.小学{
背景色：#1e87f0；
}
.primary:悬停{
背景色：#0f7ae5；
颜色：#fff；
}
尝试创建一个更好的示例，这在很大程度上取决于您在哪里调用它