如何在渲染后执行副作用，在组件主体中使用 useEffect() 声明它。？答案

【问题标题】：How To execute a side effect after rendering, declare it in the component body with useEffect().?如何在渲染后执行副作用，在组件主体中使用 useEffect() 声明它。？
【发布时间】：2021-03-29 06:19:15
【问题描述】：

我收到此错误：

“来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。”

这里是代码-->

  const [channels, setChannels] = useState([]);
  const [firstLoad, setFirstLoad] = useState(true);
     useEffect(() => {
        const addListeners = () => {
          let loadChannels = [];
          channelRef.on("child_added", (snap) => {
            loadChannels.push(snap.val());
            setChannels(loadChannels, () => {
              setFirstChannel();
            });
          });
        };
        addListeners();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
      const setFirstChannel = () => {
        const channel = channels[0];
        if (firstLoad && channels.length > 0) {
          setCurrentChannel(channel);
          setFirstLoad(false);
        }
      };

最初在 redux 中，currentChannel 显示为 null。我想如果有频道，那么 currentChannel 应该是第一个。

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以将回调作为您的第一个参数传递给您的 useEffect 并将 loadChannels 传递给您的副作用

const setFirstChannel = (channels) => {
      const channel = channels[0];
      if (firstLoad && channels.length > 0) {
          setCurrentChannel(channel);
          setFirstLoad(false);
      }
};

 useEffect(() => {
        const addListeners = () => {
          let loadChannels = [];
          channelRef.on("child_added", (snap) => {
            loadChannels.push(snap.val());
            setChannels(prevState => {
              setFirstChannel(loadChannels); 
              return loadChannels;
            });
          });
        };
        addListeners();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);

【讨论】：