React函数参数值异常：无法获取最新参数值求助

核心问题1：文件输入框ID重复 #

你在acc函数中给所有文件上传输入框设置了固定的id="imageInput"，当调用document.getElementById('imageInput')时，浏览器只会返回第一个匹配该ID的DOM元素。这就导致点击第二个Accordion的"Load Image"按钮时，实际触发的是第一个Accordion里的文件输入框，自然回调中的title参数是第一个Accordion的值。

核心问题2：状态未隔离 #

你使用了父组件的共享状态inputValue和imageUrl，这会导致所有Accordion实例共用同一组状态，操作任何一个都会影响其他实例（虽然你提到文本框参数正确，但这只是表象，实际两个输入框会同步显示相同内容）。

修复步骤 #

1. 给文件输入框设置唯一ID并隔离状态

修改acc函数，为每个实例创建独立状态，并生成唯一的输入框ID：

function acc(title) {
  // 为每个Accordion实例创建独立状态
  const [inputValue, setInputValue] = useState('');
  const [imageUrl, setImageUrl] = useState('');

  const handleImageChange = (e, itemTitle) => {
    const file = e.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setImageUrl(url);
      console.log('当前操作的Accordion:', itemTitle);
    }
  };

  return (
    <div className="accordion-item">
      <h2 className="accordion-header" id={`heading${title}`}>
        <button
          className="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target={`#collapse${title}`}
          aria-expanded="true"
          aria-controls={`collapse${title}`}
        >
          {title}
        </button>
      </h2>
      <div
        id={`collapse${title}`}
        className="accordion-collapse collapse show"
        aria-labelledby={`heading${title}`}
        data-bs-parent="#accordionExample"
      >
        <div className="accordion-body">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="Enter text"
          />
          {/* 点击按钮时获取对应唯一ID的输入框 */}
          <button onClick={() => document.getElementById(`imageInput-${title}`).click()}>
            Load Image
          </button>
          {/* 设置唯一ID */}
          <input
            type="file"
            id={`imageInput-${title}`}
            style={{ display: 'none' }}
            onChange={(e) => handleImageChange(e, title)}
          />
          {imageUrl && <img src={imageUrl} alt="Uploaded" width="200" />}
        </div>
      </div>
    </div>
  );
}

2. （可选）改用React组件规范写法

将acc从普通函数改为标准的React函数组件，配合useRef替代DOM查询，更符合React编程范式：

function AccordionItem({ title }) {
  const [inputValue, setInputValue] = useState('');
  const [imageUrl, setImageUrl] = useState('');
  const fileInputRef = useRef(null);

  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setImageUrl(url);
      console.log('当前操作的Accordion:', title);
    }
  };

  return (
    <div className="accordion-item">
      <h2 className="accordion-header" id={`heading${title}`}>
        <button
          className="accordion-button"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target={`#collapse${title}`}
          aria-expanded="true"
          aria-controls={`collapse${title}`}
        >
          {title}
        </button>
      </h2>
      <div
        id={`collapse${title}`}
        className="accordion-collapse collapse show"
        aria-labelledby={`heading${title}`}
        data-bs-parent="#accordionExample"
      >
        <div className="accordion-body">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="Enter text"
          />
          <button onClick={() => fileInputRef.current.click()}>
            Load Image
          </button>
          <input
            type="file"
            ref={fileInputRef}
            style={{ display: 'none' }}
            onChange={handleImageChange}
          />
          {imageUrl && <img src={imageUrl} alt="Uploaded" width="200" />}
        </div>
      </div>
    </div>
  );
}

调用时使用组件形式：<AccordionItem title="Accordion 1" />、<AccordionItem title="Accordion 2" />，代码更清晰且避免DOM操作隐患。

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