React中点击按钮用find查找对象，如何存入useState并展示？

先修正你代码里的基础问题，再处理状态更新和内容展示的逻辑：

1. 修复基础语法问题 #

• numbers数组里的namn值是字符串，必须加引号（"one"、"two"、"three"），否则会被识别为未定义变量。
• 统一字段名：把selected里的name改成namn，和numbers数组的字段保持一致，避免后续取值混乱。

2. 将找到的对象存入useState #

在next函数中，找到目标对象后直接调用setSelected更新状态即可，还可以简化逻辑，不用分开写if else里的查找逻辑：

function next() {
  // 先更新count的当前值
  count.current = count.current === 2 ? 0 : count.current + 1;
  // 根据count值找到对应对象
  const targetItem = numbers.find(number => number.id === count.current);
  // 更新selected状态
  if (targetItem) { // 加判断避免找不到对象的情况
    setSelected(targetItem);
  }
}

3. 正确展示对象内容 #

next是按钮的点击处理函数，不应该返回JSX，组件的渲染内容要单独写在return里。另外img标签要通过src属性设置图片路径，不能把路径放在标签内容里：

return (
  <>
    {/* 点击按钮触发切换逻辑 */}
    <button onClick={next}>下一个数字</button>
    {/* 展示选中的对象内容 */}
    <img src={selected.img} alt={selected.namn} />
    <p>namn: {selected.namn}</p>
  </>
);

完整修改后的代码 #

import { useState, useRef } from 'react';

function NumberSwitcher() {
  // 修正字符串引号问题
  const numbers = [
    { id: 0, namn: "one", img: "../number/one" },
    { id: 1, namn: "two", img: "../number/two" },
    { id: 2, namn: "three", img: "../number/three" },
  ];

  // 直接用numbers的第一个元素初始化，避免重复写对象
  const [selected, setSelected] = useState(numbers[0]);

  const count = useRef(0);

  function next() {
    count.current = count.current === 2 ? 0 : count.current + 1;
    const targetItem = numbers.find(number => number.id === count.current);
    if (targetItem) {
      setSelected(targetItem);
    }
  }

  return (
    <>
      <button onClick={next}>切换数字</button>
      <img src={selected.img} alt={`数字${selected.namn}`} />
      <p>namn: {selected.namn}</p>
    </>
  );
}

export default NumberSwitcher;

关键说明 #

• 初始化selected时直接复用numbers[0]，更简洁且不易出错。
• 加if (targetItem)判断是防止find返回undefined（比如id不匹配的情况），避免状态更新出错。
• img标签必须设置src属性，alt属性用于无障碍访问，建议加上。

内容的提问来源于stack exchange，提问作者Eraze