Reactjs 无法获取在中单击的项的键值

在点击每个框的过程中，我想获得相应框的

标签。但是，当控制台记录打印标记时，它显示为未定义。我尝试了两种情况，如
e.currentTarget.tags
和
e.target.tags
，但仍然没有得到正确的结果。有人能帮忙吗

演示链接：


const blogData=[
{
id:1，
标题：“柏树测试”，
description:“添加E2E cypress UI测试”，
createddate：“2020年9月19日”，
标签：“柏树”
},
{
id:2，
标题：“Jmeter测试”，
描述：“使用Jmeter工具进行性能测试”，
createddate：“2020年8月15日”，
标签：[“jmeter”，“performance”]
},
{
id:3，
标题：“基本Unix命令”，
描述：“学习git bash中的基本unix命令”，
createddate：“2020年7月10日”，
标签：“unix”
},
{
id:4，
标题：“邮递员”，
描述：“使用邮递员进行Api测试”，
createddate：“2020年6月1日”，
标签：[“邮递员”、“api”]
}
];
导出默认函数App（）{
const[searchResults，setSearchResults]=useState（[]）；
const[showColor，setShowColor]=useState（“”）；
const[findTag，setFindTag]=useState（“”）；
useffect（（）=>{
设置搜索结果（blogData）；
}，[blogData]）；
常数随机化十六进制=（e）=>{
setFindTag（例如currentTarget.tags）；
日志（“打印标签：”，findTag）；
const randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
设置显示颜色（随机颜色）；
};
返回(
{searchResults.map（（博客）=>(
代码需要将
blog
对象传递给回调：

const randomizedHex=（blog）=>{
setFindTag（blog.tags）；
日志（“打印标签：”，findTag）；
const randomColor=“#”+Math.floor（Math.random（）*16777215）.toString（16）；
设置显示颜色（随机颜色）；
};
返回(
{searchResults.map（（博客）=>(
{randomizedHex（blog）；}}className=“equalBox”>
{blog.id}
{blog.tags}
))}
);
你说得对！你也可以调用函数，比如
onClick={（）=>randomizedHex（blog）}
而不使用
{}
@dazs True，虽然从
onclick
事件侦听器返回
false
具有重要意义，因此我避免从箭头函数中隐式返回值，除非我确实需要返回值。@RossAllen谢谢，如果我的博客有点不同的JSON结构，我们可以直接从中获得
标记吗？@soccerway我确实需要我想我不明白你的后续问题。你能发布一个新问题并链接到这里吗？谢谢Allen，我确实有一个代码沙盒链接要分享，但我还没有提出新问题。问题相同，但博客对象结构不同。
const blogData = [
  {
    id: 1,
    title: "Cypress tests",
    description: "Add the E2E cypress UI tests",
    createddate: "19 September 2020",
    tags: "cypress"
  },
  {
    id: 2,
    title: "Jmeter tests",
    description: "Performance test using Jmeter tool",
    createddate: "15 August 2020",
    tags: ["jmeter", "performance"]
  },
  {
    id: 3,
    title: "Basic Unix commands",
    description: "Learn basic unix commands in git bash",
    createddate: "10 July 2020",
    tags: "unix"
  },
  {
    id: 4,
    title: "Postman",
    description: "Api testing using postman",
    createddate: "1 June 2020",
    tags: ["postman", "api"]
  }
];
export default function App() {
  const [searchResults, setSearchResults] = useState([]);
  const [showColor, setShowColor] = useState("");
  const [findTag, setFindTag] = useState("");
  useEffect(() => {
    setSearchResults(blogData);
  }, [blogData]);

  const randomizedHex = (e) => {
    setFindTag(e.currentTarget.tags);
    console.log("Print tag:", findTag);
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
    setShowColor(randomColor);
  };

  return (
    <div className="App">
      <div className="wrap">
        {searchResults.map((blog) => (
          <article onClick={randomizedHex} className="equalBox">
            <section>
              <span key={blog.id}> {blog.id} </span>
            </section>
            <section>
              <div key={blog.tags}>{blog.tags}</div>
            </section>
          </article>
        ))}
      </div>
    </div>
  );
}