英文:
Using useState for storing components as array
问题
在点击按钮后,我想在表单中添加新行。我已经创建并导入了Lines组件,现在在点击按钮后,我想在表单中添加1行。
我已经能够编写这个代码。但是这不起作用,甚至不会显示错误。我不知道如何修复它。
useState是一个空数组,在点击按钮后,我想添加并存储新的
谢谢
const Form = () => {
const [lines, setLines] = useState([]);
const addLine = () => {
setLines(lines => [...lines, <Lines />]);
};
return (
<div>
<form>
{lines.map((line, index) => (
<div key={index}>{line}</div>
))}
</form>
<button onClick={addLine}></button>
</div>
);
};
英文:
after clicking on button I want add new line into form.
I created and imported Lines component and now after clicking on button I want add 1 into form.
I was able wrote this. But this doesnt work, it will not even show error. and I have no idea how to fix it.
useState is empty array, and after clicking button I wanna add and store new <Lines /> component.
Thank you
const Form = () => {
const [lines, setLines] = useState([]);
const addLine = () => {
setLines(lines => [...lines, <Lines />]);
};
return (
<div>
<form>
{lines.map(line => {
{line}
})}
</form>
<button onClick={addLine}>
</button>
</div>
);
};
答案1
得分: 0
> {lines.map(line => {
> {line}
> })}
这段代码没有正常工作,因为在你的 map
函数中没有返回语句。你应该这样写:
{lines.map(line => {
return line;
})}
而且,由于此时 map
函数没有做任何改变,你可以直接使用原始数组:
{lines}
但我建议你不要将元素存储在 React 状态中。在当前示例中,你没有任何 props,但一旦有了 props,就很容易因为过期的 props 导致 bug。
相反,你的状态应该是描述页面所需的最小数据量,然后在渲染期间创建元素。例如,如果每行都有一些关联的数据,可以继续使用数组,只存储数据而不是元素:
const Form = () => {
const [lines, setLines] = useState([]);
const addLine = (name) => {
setLines(lines => [...lines, { name }]);
};
return (
<div>
<form>
{lines.map(line => {
return <Lines name={line.name} />
})}
</form>
<button onClick={addLine}></button>
</div>
);
};
或者,如果没有有关每行的数据,那么你可以将状态更改为仅仅是一个数字:
const [numLines, setNumLines] = useState(0);
const addLine = () => {
setNumLines((prev) => prev + 1);
};
const lines = [];
for (let i = 0; i < numLines; i++) {
lines.push(<Lines />);
}
return (
<div>
<form>{lines}</form>
<button onClick={addLine}></button>
</div>
);
英文:
>
> {lines.map(line => {
> {line}
> })}
>
It's not working because you have no return statement in your map
function. You would write this as:
{lines.map(line => {
return line
})}
And since at that point the map function isn't changing anything, you can just use the original array.
{lines}
But i would urge you not to store elements in react state. You don't have any props in the current example, but as soon as you do it will become extremely easy to have bugs caused by stale props.
Instead, your state should be the minimum amount of data needed to describe the page, and then the elements should be created during render. For example, If each line has some data associated, continue to use an array but just store the data not the elements:
const Form = () => {
const [lines, setLines] = useState([]);
const addLine = (name) => {
setLines(lines => [...lines, { name }]);
};
return (
<div>
<form>
{lines.map(line => {
return <Lines name={line.name} />
})}
</form>
<button onClick={addLine}>
</button>
</div>
);
};
Or if there's no data about each one, then you could change the state to be just a number:
const [numLines, setNumLines] = useState(0);
const addLine = () => {
setNumLines((prev) => prev + 1);
};
const lines = [];
for (let i = 0; i < numLines; i++) {
lines.push(<Lines />);
}
return (
<div>
<form>{lines}</form>
<button onClick={addLine}></button>
</div>
);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论