使用来自状态的数据初始化文本输入默认值会为文本输入提供旧的状态数据

Posted 2023-01-14

我正在尝试学习MERN堆栈，并一直在尝试创建一个简单的CRUD应用。我已经完成了创建，读取和删除的操作，但仍无法初始化文本输入。

我单击一个链接以URI中的ID作为参数进行重定向。呈现组件时，我在useEffect挂钩中执行了一项操作，以使用ID参数在mongoDB中检索文档。此操作将更新初始化文本输入时要使用的状态。

我的问题是文本输入已初始化，但落后了。

我尝试将操作放入链接的onClick中，但仍然得到相同的结果。

这是我的链接，该链接重定向到组件：

<Link
 to= pathname: `/$client._id` 
>

这是我的表格：

const Form = (client, getClient) => 
 useEffect(() => 
  getClient(window.location.pathname.split('/')[1];
 , [getClient]

const [formData, setFormData = useState(
 name: client ? client.name : ''
);

const  name  = formData;

return (
 <input
  type='text'
  placeholder='* Name'
  name='name'
  value=name
  onChange=e => onChange(e)
 />
)
;

const mapStateToProps = state => (
  client: state.client,
);

export default connect(
 mapStateToProps,
  getClient 
)(withRouter(Form));

这里会发生什么：

1. 单击链接1并重定向
2. 文本输入中没有值
3. 返回
4. 单击链接2并重定向
5. 文本输入有值，但名称来自链接1

我能正确解决问题吗？

答案

发现了问题，如果有人遇到相同的问题，我将予以发布。

这是我的useEffect挂钩中的第二个参数。每当它发生变化时，我都没有设置所需的状态。

 useEffect(() => 
  // Stuff
 , [*state that was changing*]