超出最大更新深度。这可能发生在当一个组件调用setState在use效应，但use效应要么没有一个依赖数组

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,
      });

   
  }, []);

}
  

抛出以下错误，浏览器崩溃未捕获（promise）错误：重新渲染过多。React限制渲染的数量以防止无限循环。

Answer 1

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

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

如果只希望在第一次渲染时运行一次useEffect，可以将阵列保留为空，如下所示：

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

Answer 2

很抱歉，您的代码太复杂，无法阅读。请重新组织代码，使其更易于阅读和理解。请尝试将充电useSelector线路连接到此线路：

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

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

另外，在useffect中，当您设置状态usesetState回调时，这不会覆盖您以前的状态更新：

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