React 在传递给函数时发送地图中的最后一个元素

Question

我正在尝试使用 React 创建动态 UI 元素，并通过映射数组创建了一个元素循环，并在单击元素时将值传递给函数。我的代码如下所示

const [shortlistedIds, setShortlistedIds] = useState([]);
const attachmentInputRef = useRef();

const handleOpenFilePicker = async () => {
  attachmentInputRef.current.click();
};

//somewhere in code, set the IDs
setShortlistedIds(["1", "2", "3", "4"]);

const handleFilePicker = async(e) => {
  console.log(e.target.id)
  let uploadFiles = [...e.target.files]
  const apiRes = await api.createAttachment(e.target.id, uploadFiles)
 }

return(
  {shortlistedIds.map((myId) => (
    <button
       id={myId}
       className="attachment-button pull-right"                 
       onClick={handleOpenFilePicker}
       style={{ position: "absolute" }}
    >
       click me {myId}
    </button>
    <input
        id={myId}
        ref={attachmentInputRef}
        type="file"
        style={{ display: "none" }}
        name="file"
        onChange={(e) => {handleFilePickerChange(myId, e);}}
        multiple
     />

  )
)};
)

html 使用每个按钮的正确 ID 和文本正确呈现，但在单击时，从 handleFilePicker 打印在控制台中的值始终是最后一个 ID，上面示例中的“4”，无论哪个按钮我点击。不确定这里的问题是什么。（请忽略任何错别字，因为这是基于实际代码的示例代码。将实际代码粘贴在这里是不可行的）

Answer 1

简单点

const [shortlistedIds, setShortlistedIds] = useState([]);
useEffect(() => {
setShortlistedIds(["1", "2", "3", "4"]);
}, [])
const targetClick = (e)=>{
console.log(e);
}


return (
       {
        shortlistedIds.map(myId => {
          return(<button onClick={() =>targetClick(myId)} key={myId}>click me{myId}</button>)
         
        })
      }
)

Answer 2

上述案例中的问题是 useRef() 指向一个引用，因此，重新分配它会在每次在映射中分配时更改值，最终分配给最终值。 useRef() 挂钩不会与输入字段中的每个分配一起复制。

为了解决这个问题，我将输入块移动到一个子组件，该子组件为每个输入字段创建了一个 useRef() 挂钩，因此工作正常。

Answer 3

您必须在按钮元素中传递属性 key={myid}。

React 在传递给函数时发送地图中的最后一个元素

React sends last element in map when passing to function

javascript

event-handling

reactjs

react-native