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函数）作为数组长度来生成新数组。

Codesandbox：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>
  );
};

根据用户输入更新数组值

1 个答案: