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 : ''
);

出现类似“重新渲染太多”的错误。 React限制渲染次数以防止无限循环

1 个答案: