Javascript 反应递归-can'；得不到正确的值

我有一个名为

items

的对象数组。每个对象都是这样的

interface IItem {
 id: string;
 title: string;
 items: IItem[] | null
}

所以我在做递归，就像在

父组件：

        {items?.map((folder, index) => (
          <Item
            onClick={(event) => {
              event.stopPropagation();
              event.preventDefault();
              console.log(
                event.target.innerHTML,
                folder.id,
                folder.title
              );
            }}
            key={folder.id}
            data={folder}
          />
        ))}

{items?.map((folder, index) => (
    <Item
      onClick={(event, clickedFolder) => {
        event.stopPropagation();
        event.preventDefault();
        console.log(
          event.target.innerHTML,
          clickedFolder.id,
          clickedFolder.title
        );
      }}
      key={folder.id}
      data={folder}
    />
))}

const nestedItems =
  data.items
    ? data.items.map((item, index) => (
        <Item
          onClick={onClick}
          key={item.id}
          data={item}
        />
      ))
    : null;

return (
  <div>
    <button onClick={event => onClick(event, data)}>
      <Typography>
        {data.title} {data.id}
      </Typography>
    </button>
    <div>{nestedItems}</div>
  </div>
)

Html输出和浏览器中呈现的内容看起来正确， 但当我试图从

parent

组件中的项获取

{id}或{title}

时 具有父项的任何单击的输出都不会记录它自己的id，而是记录它的父项id。 奇怪的是，在任何“非一级项目”上，上面的

console.log

如下所示：

const nestedItems =
    data.items
      ? data.items.map((item, index) => (
          <Item
            onClick={onClick}
            key={item.id}
            data={item}
          />
        ))
      : null;

  return (
    <div>
      <button onClick={onClick}>
        <Typography>
          {data.title} {data.id}
        </Typography>
      </button>
      <div>{nestedItems}</div>
    </div>

event.target.innerHTML

-正确的值

folder.id，folder.title

-是否有父项？父

id

value:它自己的

id

value

所以我不确定到底发生了什么，捕获物在哪里：/

---

提前谢谢

您仅为每个根级别的

项定义
onClick
，然后在
项
组件中，您只需将
onClick
道具传递给子级。因此，每个子项都具有与其父项相同的
onClick
功能

要解决此问题，您可以通过接受数据（id和/或其他信息）而不是将数据转换为更通用的
onClick
。这样，传递给
项目的
onClick
功能适用于任何项目，但传递给每个
项目内按钮的
onClick
功能对该项目是唯一的

例如：

父组件：

        {items?.map((folder, index) => (
          <Item
            onClick={(event) => {
              event.stopPropagation();
              event.preventDefault();
              console.log(
                event.target.innerHTML,
                folder.id,
                folder.title
              );
            }}
            key={folder.id}
            data={folder}
          />
        ))}

{items?.map((folder, index) => (
    <Item
      onClick={(event, clickedFolder) => {
        event.stopPropagation();
        event.preventDefault();
        console.log(
          event.target.innerHTML,
          clickedFolder.id,
          clickedFolder.title
        );
      }}
      key={folder.id}
      data={folder}
    />
))}

const nestedItems =
  data.items
    ? data.items.map((item, index) => (
        <Item
          onClick={onClick}
          key={item.id}
          data={item}
        />
      ))
    : null;

return (
  <div>
    <button onClick={event => onClick(event, data)}>
      <Typography>
        {data.title} {data.id}
      </Typography>
    </button>
    <div>{nestedItems}</div>
  </div>
)