React Hook useState 的新功能返回未定义

Posted 2023-02-19

【中文标题】React Hook useState 的新功能返回未定义

【英文标题】：New To React Hook useState Is Returning Undefined

【发布时间】：2019-08-29 04:04:01

【问题描述】：

useState() 给了我未定义的新状态变量（通知）：

const Notifications = (props) => 
    const [notifications, setNotifications] = useState(props.notifications);//notifications = undefined, props = notifications: Array(0)
    useEffect(() => 
        if (props.notifications) 
        setNotifications(props.notifications);
        
    , [props.notifications]);
    // do stuff....

我希望通知是[]，然后在props.notifications 更改时使用setNotifications() 更新它。 props.notification 来自 redux 商店。我不知道这是否会改变任何东西，但我确实设置了初始状态。

const initialState = Immutable.fromJS(
  notifications: [],
);

不知道为什么我变得不确定......

编辑：去掉错字和测试代码

【问题讨论】：

如果你想设置initialState一个空数组然后在useState([])初始化空数组

@binodstha7 我尝试使用useState([])，但notifications 在useEffect() 中变得未定义。

如果您看到notifications 变量被设置为undefined，那么您将undefined 作为初始值传递给useState。您的组件是否会通过通知渲染一次，然后再不渲染？您假设某些我们看不到的代码正在运行，但实际上并没有。

检查 console.log(props.notification) 在 useEffect 方法中 props.notification 中的内容，如果 props.notification 控制台未定义而不是你在 redux 部分有问题。

状态将被设置一次，因此请确保 props.notifications 最初没有未定义

【参考方案1】：

要正确设置初始状态，您应该将其作为参数传递给useState，因此：

const [notifications, setNotifications] = useState([]);

也不管你是否在某个地方设置props.notifications，但是如果你依赖它在组件中有某种默认值，那么你应该在那里设置它，例如：

const Notifications = ( notifications = [] ) => 

最后但并非最不重要的一点是，在 useEffect 的依赖列表中使用数组有一些不需要的副作用，例如，如果 notifications 结构将保持不变（相同的项目，相同的长度），但将是新数组，useEffect 将错过缓存，因为它只进行浅比较。考虑使用某种散列函数而不是数组本身（例如JSON.stringify）

【讨论】：

我建议不要使用散列函数，而是创建新数组。新州？改变值的全新对象。