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

Question

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 store。我不知道这是否会改变任何东西，但我确实设置了一个初始状态。

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

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

编辑:去掉了拼写错误和测试代码

Answer 1

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

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

此外，无论您是否在某处外部设置 props.notifications，但如果您依赖它在组件中具有某种默认值，那么您应该将其设置在那里，例如:

const Notifications = ({ notifications = [] }) => {

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