javascript React Hool重新渲染循环测试条件打开状态

ct3nt3jp 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(130)

我想更新并重新呈现钩子状态更新时的循环测试条件。在我更新状态钩子后，状态被重新呈现，但我想循环也被重新呈现。我做了一个表单。表单的长度取决于我在输入时输入的数字。
下面是我的尝试：

const [formLength, setFormLength] = useState(0);

let eachForm = () => {
  for (let x = 0; x < formLength; x++) {
    return <div>{x+1} inpute</div>;
  }
};

useEffect(() => {
  eachForm();
}, [formLength]);

{formLength <= 0 ? (<>Zeroo</>) : (<><eachForm /></>)}

JavaScript

来源：https://stackoverflow.com/questions/75152965/react-hool-re-render-loop-test-condition-on-state

2条答案

按热度按时间

carvr3hs1#

当状态改变时，你的组件将被重新渲染，因此不需要useEffect。

const [formFields, setFormFields] = useState([]);
  return (
    <div className='App'>
      <input type='button' onClick={()=>
      setFormFields([...formFields,<p key={formFields.length}>{formFields.length}</p>])} 
      value="+"/>
      <form>
      {formFields}
      </form>
    </div>
  );

赞(0）回复(0）举报 2023-01-19

azpvetkf2#

这里不需要useEffect钩子，它不会为您做任何事情。您可以直接从formLength状态呈现JSX。eachForm也不是有效的React组件，所以它不能像<eachForm />那样使用，for-loop也会在第一次迭代时返回，并且不会像我猜想的那样返回div元素的数组。
示例：

const [formLength, setFormLength] = useState(10);

return (
  <>
    {formLength
      ? Array.from({ length: formLength }).map((_, i) => (
          <div key={i}>{i+1} input</div>
        ))
      : <>Zero</>
  </>
);

赞(0）回复(0）举报 2023-01-19

我来回答

javascript React Hool重新渲染循环测试条件打开状态

2条答案

相关问题

热门标签

最新问答