根据用户输入更新数组值

Question

我尝试在我的应用程序中实现一个组件。在那里，我想根据用户设置的数字设置渲染段落的数量。例如，如果用户选择3应该显示 3 个段落，但如果用户在此之后选择 1，则段落数应减少到 1。这是我的代码：

const Nr = () => {
const [nr, setNr] = useState([]);
function onChange(value) {
console.log("changed", value);
setNr([...nr, value]);
}
return (
<div>
{nr.map(i => {
return <p>{i}</p>;
})}
<InputNumber min={1} max={10} onChange={onChange} />;
</div>
);
};
export default Nr;

但是现在，如果选择 3 个段落是正常的，但如果之后我选择 2，则段落不会减少，而是增加。如何解决这个问题？
演示：https://codesandbox.io/s/cranky-glitter-9d7sn?file=/Number.js:163-490

Answer 1

一个好的方法是使用传入值(来自onChange函数(作为数组长度生成一个新数组。

代码沙盒：https://codesandbox.io/s/proud-http-r49px?file=/Number.js:163-526

const Nr = () => {
const [nr, setNr] = useState([]);
function handleInputChange(value) {
const newArray = Array.from({ length: value }, (_, index) => index + 1);
setNr(newArray);
}
return (
<div>
{nr.map(i => (
<p key={i}>{i}</p>
))}
<InputNumber min={1} max={10} onChange={handleInputChange} />;
</div>
);
};