在映射函数内调用useState钩子导致无限循环

Question

我目前正在构建一个动态表单引擎，希望在呈现应答摘要组件时显示redux存储区的结果。我认为最好的方法是在加载answerSummary组件后设置“complete”状态并将其设置为true，但在map函数中这样做不起作用，并抛出无限循环react错误。

代码如下：

function App() {
  let [complete, setComplete] = useState(false);
  return (
    <div>
      <h1>Form App Prototype</h1>
      <Router>
        <Switch>
          {Object.values(Database.steps).map(step => {
            step.name === 'answerSummary' ? setComplete(true) : setComplete(false);
            return (

              <Route exact path={`/${step.name}`} render={() =>
                <Step step={step} />

              }
              />
            )
          })}
        </Switch>
      </Router>
        <br></br>
        <div style={{display: complete? 'block' : 'none'}}><StoreVisual/></div>

    </div>
  );
}

export default App;

编辑：我知道你不能在渲染中设置状态-我这样写是为了尝试和传达我想要做的事情

Answer 1

不要在返回中内联运行该代码，而是在函数逻辑中构建数组：

function App() {
  let [complete, setComplete] = useState(false);
  // build an array of Route components before rendering
  // you should also add a unique key prop to each Route element
  const routes = Object.values(Database.steps).map(step => {
    step.name === 'answerSummary' ? setComplete(true) : setComplete(false);
    return <Route exact path={`/${step.name}`} render={() => <Step step={step} />} />
  })
  return (
    <div>
      <h1>Claimer Form App Prototype</h1>
      <Router>
        <Switch>
          // render the array 
          {[routes]}
        </Switch>
      </Router>
      <br></br>
      <div style={{display: complete? 'block' : 'none'}}><StoreVisual/></div>
    </div>
  );
}

export default App;

我认为你不需要根据这个逻辑调用set完成（false），所以你应该用if语句替换你的三进制：

if (step.name === 'answerSummary') {
  setComplete(true)
}

并避免进行不必要的函数调用

Answer 2

如果只想渲染

 const [index, setIndex] = useState(0);

每次有人前进一步，都会增加该值。

您必须将setIndex或任何您称之为setter的内容传递到步骤组件中才能执行此操作。

然后可以渲染

<div>
      <h1>Claimer Form App Prototype</h1>
      <Router>
        <Switch>
          {Object.values(Database.steps).map(step => 
              <Route exact 
                     path={`/${step.name}`} 
                     render={() => <Step step={step} /> }/> )}
        </Switch>
      </Router>
        <br></br>
        {Database.steps[index] === 'answerSummary' && <StoreVisual/>}
    </div>

这种方法也为您提供了一种简单的方法，让人们从表单的中间开始。假设你想让人们将来保存半成品表单，你只需更改/更新索引钩子的默认值。

Answer 3

我对您的问题的理解是，您试图在安装应答摘要组件后显示结果。您可以通过使用组件安装时运行的useffect挂钩来实现这一点。https://reactjs.org/docs/hooks-effect.html