在下面的代码中，如何更改代码以便在单击 notes.name 按钮时显示相应名称的借出详细信息？

Question

https://codesandbox.io/s/react-example-m9l6j?fontsize=14

我是 React 新手，能否请您在 codesandbox 中显示工作代码，在此先感谢

function Todo() {
  let notes = [
    {
      id: 1,
      name: "Brad",
      lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
    },
    {
      id: 2,
      name: "John",
      lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
    }
  ];
  const [state, setState] = React.useState(false);
  const handleClick = e => {
    setState(!state);
    console.log(e.target);
  };

  return (
    <div>
      {notes.map(note => (
        <ul key={note.id}>
          <button onClick={handleClick}>{note.name}</button>
        </ul>
      ))}
      {state &&
        notes[0].lent.map((
          mapper //how do I change index here?
        ) => (
          <ul key={mapper.id}>
            <li>{mapper.id}</li>
            <li>{mapper.amount}</li>
          </ul>
        ))}
    </div>
  );
}

Answer 1

请在此处检查解决方案，https://codesandbox.io/s/react-example-8f0jy?fontsize=14。

当用户单击按钮时，我尝试将 id 存储为参考。然后尝试根据id过滤笔记

function Todo() {
  let notes = [
    {
      id: 1,
      name: "Brad",
      lent: [{ id: 1, amount: 1000 }, { id: 2, amount: 2000 }]
    },
    {
      id: 2,
      name: "John",
      lent: [{ id: 1, amount: 3000 }, { id: 2, amount: 4000 }]
    }
  ];

  const [id, setId] = React.useState(-1);
  const handleClick = id => {
    setId(id);
  };

  return (
    <div>
      {notes.map(note => (
        <ul key={note.id}>
          <button onClick={() => handleClick(note.id)}>{note.name}</button>
        </ul>
      ))}
      {id >= 0 &&
        notes
          .filter(note => note.id === id)[0]
          .lent.map((
            mapper //how do I change index here?
          ) => (
            <ul key={mapper.id}>
              <li>{mapper.id}</li>
              <li>{mapper.amount}</li>
            </ul>
          ))}
    </div>
  );
}

在下面的代码中，如何更改代码以便在单击 notes.name 按钮时显示相应名称的借出详细信息？

In the following code How do I change code so it shows the lent details of the corresponding name when I click the notes.name button?

logic

reactjs

react-hooks