React组件问题：按用户输入动态渲染对应数量段落

我看了你的代码，问题出在state的使用逻辑上——你现在把用户每次选择的数值都追加到数组nr里，导致段落只会不断增多，而不会根据新选择的数值调整数量。咱们来调整一下：

问题根源 #

你的useState初始化的是一个空数组，onChange里执行setNr([...nr, value])是把新选择的数值追加到数组末尾，比如选3后数组是[3]，再选2就变成[3, 2]，所以map出来两个段落，完全不是你想要的“显示对应数量段落”的效果。

解决方案 #

我们需要把state改成存储当前用户选择的段落数量（单个数字），然后根据这个数字生成对应数量的段落：

import { useState } from 'react';
import InputNumber from 'antd/es/input-number';

const Nr = () => {
  // 初始化count为1，匹配InputNumber的最小值限制
  const [count, setCount] = useState(1); 

  function onChange(value) {
    console.log("changed", value);
    // 直接更新count为当前选择的数值
    setCount(value); 
  }

  return (
    <div>
      {/* 根据count生成对应数量的段落 */}
      {Array.from({ length: count }, (_, index) => (
        <p key={index}>段落 {index + 1}</p>
      ))}
      <InputNumber min={1} max={10} onChange={onChange} defaultValue={1} />
    </div>
  );
};

export default Nr;

关键改动说明 #

• State类型调整：把存储数组的nr改成存储数字的count，直接对应要显示的段落数量
• OnChange逻辑简化：不再追加数组，直接将用户选择的数值赋值给count
• 段落生成方式：用Array.from({length: count})创建一个长度为count的数组，通过map渲染对应数量的段落，注意给每个段落加唯一的key属性（简单场景下用索引即可）

这样修改后，用户选择3就会显示3个段落，再选择1就会只剩1个，完全符合你的需求啦。

内容的提问来源于stack exchange，提问作者Asking