React Hool重新渲染循环测试状态的条件

Question

我想在钩子状态更新时更新并重新渲染for循环测试条件。在我更新状态钩子后，状态被重新渲染，但我希望循环也被重新渲染。我做了一个表格。表单的长度取决于我在输入时输入的数字。

这是我尝试的:

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 /></>)}

Answer 1

这里不需要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</>
</>
);

Answer 2

当状态改变时，你的组件会被重新渲染，所以不需要使用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>
);