当我将JavaScript映射函数输出到JSX时，输出的值很奇怪

Question

这是我使用的json数组。

console.log(materialIngredientDetail)
[
    {
      content: "123",
      functionalList: [
        {
          content: "hi",
          valueUnit: "42",
        },
      ],
    },
    {
        content: "35",
        functionalList: [
          {
            content: "ss",
            valueUnit: "88",
          },
        ],
      },
    {
        content: "456",
        functionalList: [
          {
            content: "minsu",
            valueUnit: "12",
          },
        ],
    },
];

动态生成{值。单位价值}第一按钮文本42，第二按钮文本88，第三按钮文本12。当按下这些按钮时，也输出内容值。

我还使用Content.current.click() useRef执行了onClickModifyContent函数。
问题是，当点击valueUnit值为42的按钮时，内容是123，但输出是456。

  const Content = useRef(null);
  const valueUnit = useRef(null);

  const onClickModifyContent = (content) => {
    console.log(content);
  };
  const onClickModifiyValueUnit = (valueUnit) => {
    Content.current.click();
    console.log(valueUnit);
  };
return (
    <>
    materialIngredientDetail.map((Fields, index) => (
    <>
    <p>{Fields.content}</p>
    <button style={{"display": "none"}} ref={Content} onClick={() => onClickModifyContent(Fields.content)}></button>
    </>
    {Fields.functionalList.map((Value, key) => {
        return (
            <>
            <p>{Value.valueUnit}</p>
            <button onClick={() => onClickModifiyValueUnit(Value.valueUnit)}>{Value.valueUnit}</button>
            </>
        )
    })}
    ))
    </>
)

我不知道为什么内容是456时，我点击按钮与valueUnit 42值。
同样，当点击valueUnit值为88的按钮时，应该输出35 Content，但输出值为456。你到底为什么要这么做?

奇怪的是，valueUnit值通常输出到console.log。

Answer 1

那是因为你对所有元素使用了单个ref。这意味着在迭代过程中，每个元素替换前一个元素作为Content.current的值。这就是为什么，无论你点击什么元素，你只能得到最后一个。

你可以这样写:

ref={(el)=>el && Content.current.push(el)}

在click函数中你也可以传递索引，这样做:

onClick={()=>modifyValueUnit(Value.valueUnit,index)}

const modifyValueUnit = (unit,index) => {
  Content.current[index].click();
}