我们如何在 useState 中使用 Redux 状态来设置初始值

Question

我正在尝试使用 useState 使用 redux 值来设置 react 组件的初始状态。当我尝试设置 setIsStar 的状态时，它说当前通道名称为空。我怎样才能避免这种情况？还是有其他方法

const currentChannel = useSelector(state => state.channel.currentChannel);
   const currentChannelName = currentChannel.name;

  const [isStar, setIsStar] = useState({
    [currentChannelName]: true
  });

Answer 1

可能的解决方案是将其与useEffect相结合：

const currentChannel = useSelector(state => state.channel.currentChannel);
const currentChannelName = currentChannel.name;
useEffect(() => {
    if(currentChannelName) {
        setIsStar({[currentChannelName]: true});
    }
}, [currentChannelName]); // listen only to currentChannelName changes
const [isStar, setIsStar] = useState(currentChannelName ? {
    [currentChannelName]: true
}: {});

'

Answer 2

您应该避免这种情况，因为它会在两个单独的域中稀释您的状态。

在 redux 存储中保留应用范围的状态，在组件中保留本地组件状态。

如果您确实想这样做，您可能只需要处理组件已挂载但存储中未填充所需数据的初始情况。

const currentChannel = useSelector(state => state.channel.currentChannel);
const currentChannelName = currentChannel.name;
const [isStar, setIsStar] = useState(currentChannelName && {
  [currentChannelName]: true
});

Answer 3

最简单的解决方案是：

// Redux state
const user = useSelector((state) => state.user);
const [firstName, setFirstName] = useState(user.firstName || '');