Question

React的新手，正在尝试创建一个聊天应用程序，而在我的应用程序中却有一部分频道现在在这里，我为获取频道做了什么

const [Channels, setChannelState] = React.useState([]);

  const ref = firebase.database();
  const loadedChannels = [];

  React.useEffect(() => {
    ref.ref("channels").on("child_added", snap => {
      loadedChannels.push(snap.val());
      setChannelState([...loadedChannels]);
    });
  }, []);

添加新频道后，它会更新本地状态

所以我的问题是我想在页面加载时基本上从Channels State Array获取第一个通道，即 Channels 并将其设置为redux全局状态

这是我的调度员

const mapDispatchToProps = dispatch => {
  return {
    SetFirstChannel: channel => {
      dispatch({ type: "SET_FIRST_CHANNEL", payload: channel });
    }
  };
};

和我的减速器中：

const iState = {
  currentChannel: ""
};

export const rootReducer = (state = iState, action) => {
  return {
    currentChannel: action.payload
  };
};

现在如何从Channels数组中获取第一个元素并存储到Redux中

这是我到目前为止所做的。 https://codesandbox.io/embed/quiet-wind-g9zxx 但这会导致多次设置redux状态

Answer 1

如果您只是每次都希望第一个频道，并且仅在第一个频道更改时才更新它，那么应该可以执行以下操作：

React.useMemo(() => props.SetFirstChannel(Channels[0]), [Channels[0]]);

我在本地设置并检查。让我知道它是否有效。干杯！

useEffect多次设置Redux状态

1 个答案: