我有两个简单的函数（app，generateList）。出现的问题是，每当我从generateList中单击渲染的div时，有时我会得到该div的id的控制台记录值，但大多数时候我会得到一个被记录的空白值。如果我点击一个有另一个id的div，这个id会被记录下来，但是如果我再次点击，这个id不会被记录下来，而是一个空值被记录下来。
为什么会这样？

应用程序功能如下：

[![import React from 'react';
import GenerateList from './generate_list';

function App() {

const \[notes,SetNotes\] = React.useState(\[{id:1,value:""}\]); 

function addNote()
{
  SetNotes(prevItem => {return (\[...prevItem,{id:prevItem\[prevItem.length-1\].id+1,value:""}\])})
}

function clicked(event)
{
  console.log(event.target.id);
}


const list = notes.map(item => {return <GenerateList key={item.id} value={item.id} func={clicked} />});

return (
  <div className='container'>
    <div className='sidebar'>
      <button onClick={addNote} >Add</button>
      {list}
    </div>
  </div>
  );
}

export default App;][1]][1]

生成列表函数如下：

import React from "react"

export default function GenerateList(props)
{
  return(<div  onClick={props.func} className="note_row" id={props.value}>
    <h3>Note {props.value}</h3>
  </div>)
}