超过最大更新深度。当组件在 useEffect 中调用 setState 时会发生这种情况，但 useEffect 要么没有依赖数组

Question

我正在尝试将 基于类的 组件转换为 功能性 组件。如果我在 useEffect 挂钩中使用 componentDidMount 下的相同代码，则会收到上述错误。

// Class based component

    class Container extends Component {
      state = {
        elements: [],
        counter: 1,
        bgColor: "#ffffff",
        botTextColor: "#000000",
        botBGColor: "#aaaaaa",
        userTextColor: "#000000",
        userBgColor: "#aaaaaa",
      };
      
      componentDidMount = async () => {
        this.setState({
          bgColor: this.props.chat.currentChat.bgColor,
          botTextColor: this.props.chat.currentChat.botTextColor,
          botBGColor: this.props.chat.currentChat.botBGColor,
          userTextColor: this.props.chat.currentChat.userTextColor,
          userBgColor: this.props.chat.currentChat.userBgColor,
        });
        
        
        this.setState({
          elements:
            this.props.chat.currentChat.elements &&
            this.props.chat.currentChat.elements.length > 0
              ? elements
              : [
                  {
                    id: "0",
                    data: {
                      label: (
                        <WelcomeNode
                          id={"0"}
                          images={this.props.chat.media.map((e) => e.file)}
                          updateChoices={(choices) =>
                            this.updateChoices("0", choices)
                          }
                          updateMessage={(message) =>
                            this.updateMessage("0", message)
                          }
                          updateImage={(e) => this.updateImage(e, "0")}
                          addEdge={this.addEdgeCustom}
                          deleteEdgeChoice={(index) =>
                            this.deleteEdgeChoice("0", index)
                          }
                          isChoiceConnected={(index) =>
                            this.isChoiceConnected("0", index)
                          }
                        ></WelcomeNode>
                      ),
                      message: "",
                      choices: [],
                      type: "welcome",
                      id: "0",
                    },
                    className: "node-elements",
                    position: { x: 100, y: 100 },
                  },
                ],
          counter: elements.length > 0 ? elements.length : 1,
        });
        
       }
      
     }

以下是发生错误的功能组件

// Functional component

const initialState = {.....}

const Container = () => {
  const [state, setState] = useState(initialState);
  const { auth, chat } = useSelector((state) => ({ ...state }));
  const dispatch = useDispatch();
  const history = useHistory();

  useEffect(() => {
    setState({
      ...state,
      bgColor: chat.currentChat.bgColor,
      botTextColor: chat.currentChat.botTextColor,
      botBGColor: chat.currentChat.botBGColor,
      userTextColor: chat.currentChat.userTextColor,
      userBgColor: chat.currentChat.userBgColor,
    });

    setState({
        ...state,
        elements:
          chat.currentChat.elements && chat.currentChat.elements.length > 0
            ? elements
            : [
                {
                  id: "0",
                  data: {
                    label: (
                      <WelcomeNode
                        id={"0"}
                        images={chat.media.map((e) => e.file)}
                        updateChoices={(choices) => updateChoices("0", choices)}
                        updateMessage={(message) => updateMessage("0", message)}
                        updateImage={(e) => updateImage(e, "0")}
                        addEdge={(e) => addEdgeCustom(e)}
                        deleteEdgeChoice={(index) =>
                          deleteEdgeChoice("0", index)
                        }
                        isChoiceConnected={(index) =>
                          isChoiceConnected("0", index)
                        }
                      ></WelcomeNode>
                    ),
                    message: "",
                    choices: [],
                    type: "welcome",
                    id: "0",
                  },
                  className: "node-elements",
                  position: { x: 100, y: 100 },
                },
              ],
        counter: elements.length > 0 ? elements.length : 1,
      });

   
  }, []);

}
  

引发以下错误并且浏览器崩溃未捕获（在承诺中）错误：重新渲染过多。 React 限制渲染次数以防止无限循环。

Answer 1

抱歉，您的代码太复杂而无法阅读，请重新组织它以使其更具可读性和可理解性。请尝试将useSelector 线充到此线：

 const { auth, chat } = useSelector((state) => state);

这会导致多重渲染，因为useSelector 检测状态正在重新创建（使用扩展运算符），因此它会重新渲染组件。

在设置状态时加上useEffect 使用setState 回调，这不会覆盖您之前的状态更新：

setState(prev=>({...prev,newState}))

Answer 2

useEffect 通常需要一个依赖数组。您在 useEffect 挂钩中使用的内容应该进入该数组，例如我们有一个设置 id 的函数。 useEffect 依赖项将需要数组中的 id。因此，只有在 id 发生变化时才更新/运行这个 useEffect 钩子。

useEffect(() => {
   setId(id)
}, [id])

如果您只想在第一次渲染时运行一次 useEffect，您可以将数组留空，如下所示：

useEffect(()=>{
  //http fetch request or something
}, [])