收到像 Too many re-renders 这样的错误。React 限制渲染次数以防止无限循环

Question

我正在尝试在请求数据方法中为如下所示的字符串变量设置状态

const ViewChangeRequest = () => {
      const [requestStageValue, setRequestStage] = useState('');
      const { data: requestData, loading: requestDataLoading, error: requestDataError } = 
        useQuery(GET_SPECIFICREQUEST, {
          variables: { requestinputs: { id } },
      });

      if (requestData != null) {
setRequestStage(requestData.allRequests[0].requestStage.name); // getting error at here 
requestData.allRequests.map((code) => {
    requestDatasource.push({
        id: code.id,
        section: code.masterSection.name,
        createdBy: code.createdBy,
        type: code.requestType.name,
        status: code.requestStage.name,
        createat: code.createdAt,
    });
    return null;
  });
 } 
};
export default withRouter(ViewChangeRequest);

取决于 requeststage 值，我正在验证如下条件

 if (requestStageValue === 'Request Submitted') {
stepNumber = 0;
} else if (requestStageValue === 'In Review') {
stepNumber = 1;
} else {
stepNumber = 2;
}

我Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop在这一行遇到错误setRequestStage(requestData.allRequests[0].requestStage.name)

在将状态设置为字符串变量时，我无法理解我在哪里做错了。

任何人都可以帮助我摆脱这种情况，这将非常感谢我，非常感谢。

Answer 1

好吧，您正在setRequestStage函数中运行。这将触发状态更新，这意味着函数再次运行（因为状态更新触发重新渲染），这意味着setRequestStage再次运行，这意味着状态再次更新，因此函数再次运行等等 - 无限循环。

如果您想根据 设置初始状态requestData，请在声明时执行useState：

const [requestStageValue, setRequestStage] = useState(
    requestData !== null ? requestData.allRequests[0].requestStage.name : ''
);