reactjs - 在此错误消息中“直接在 useEffect 中移动此变量”是什么意思?
问题描述
我试图通过道具将对象传递给子组件。该值在 useEffect 挂钩中设置,并在传递给我的子组件时丢失。
我尝试在单独的函数中设置 useEffect 挂钩之外的对象的值,但该值仍然丢失。
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
return <NewComponent users={users} />
}
export default SetValue;
我希望 props.users 是 { user: 'bob' } 而不是空对象 {}。
错误信息是:
“每次渲染后,从 React Hook useEffect 中分配给 'users' 变量的赋值都会丢失。要随着时间的推移保留该值,请将其存储在 useRef Hook 中并将可变值保留在 '.current' 属性中。否则,您可以将此变量直接移动到 useEffect react-hooks/exhaustive-deps"
解决方案
关于useEffect
钩子:
通过使用这个 Hook,你告诉 React 你的组件需要在渲染之后做一些事情。React 会记住您传递的函数(我们将其称为“效果”),并在执行 DOM 更新后稍后调用它。更多的
这意味着内部的函数useEffect
将在组件渲染后被调用。这就是为什么你有一个空对象。
关于错误。你拥有它是因为 React 不记得你的users
变量——它将在每次渲染SetValue
组件时重新创建。最好使用useState
钩子设置值useEffect
并在下一次渲染时记住它。
还有一个注意事项。不要忘记将第二个参数useEffect
与一组依赖项一起传递。现在你的钩子将在每次渲染SetValue
组件后被调用。
以下是useState
钩子的使用方法:
import React, { useState, useEffect } from 'react';
function SetValue(props){
const [users, setUsers] = useState({});
useEffect(() => {
setUsers({ user: 'bob' });
}, [
//here you could pass dependencies, or leave it empty to call this effect only on first render
]);
return <NewComponent users={users} />
}
export default SetValue;
推荐阅读
- sql - T-SQL 转换错误和 WHERE...NOT IN
- asp.net - ASP.NET Core 环境问题
- javascript - 同时使用 onclick 和 oncontextmenu 显示和隐藏文本
- mongodb - Mongo中的聚合和分组
- python - 无法解析某些内容的链接
- ios - 调用 AVAssetResourceLoadingRequest 的 finishLoadingWithError(err) 时如何强制 AVPlayer 失败
- bluetooth-lowenergy - 如何使用 BLE GATT 显示动态数据集
- python-3.x - 程序使用 sudo 和 root 运行,而不是 systemd
- php - Dockerfile 设置为使用 php 和 mysql 启动 wordpress 容器,改为启动 mariadb
- javascript - 按列和关联记录的列对查询表进行排序