React中通过输入搜索对象数组(useState)并获取对象值的问题

需求说明：

• 首次输入姓名并点击搜索，将姓名添加至nameSurname数组；第二次输入姓氏并点击搜索，同样添加至该数组
• 点击Job按钮时，检查user数组中是否存在匹配该姓名与姓氏的人员，并在按钮下方的p标签中显示其职业

修正后的完整代码 #

import { useState } from 'react';
import { useForm } from 'react-hook-form';

function App() {
  const [user, setUser] = useState([
    { name: "Matthew", surname: 'Barr', job: 'Software consultant'},
    { name: "Janice", surname: 'Brownlee', job: 'Tattooist' },
    { name: "John", surname: 'Bryan', job: 'Economist' },
    { name: "Matthew", surname: 'Cringle', job: 'Sportsperson' },
  ]);
  const [nameSurname, setNameSurname] = useState([]);
  // 新增状态存储职业查询结果
  const [jobResult, setJobResult] = useState('');
  const { register, handleSubmit, formState: { errors }, reset } = useForm();
  
  const save = (data) => {
    setNameSurname([...nameSurname, data.search]);
    reset();
  };

  const writeJob = () => {
    // 检查是否已输入姓名和姓氏
    if (nameSurname.length < 2) {
      setJobResult('请先输入姓名和姓氏');
      return;
    }
    const [inputName, inputSurname] = nameSurname;
    // 在user数组中匹配姓名和姓氏完全一致的项
    const matchedUser = user.find(
      item => item.name === inputName && item.surname === inputSurname
    );
    
    if (matchedUser) {
      setJobResult(`职业：${matchedUser.job}`);
    } else {
      setJobResult('未找到匹配的人员');
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(save)}>
        <input 
          type="text" 
          placeholder='搜索' 
          className='form-control w-25 m-3' 
          {...register('search', { required: true })}
        />
        {errors.search && <p>输入不能为空</p>}
        <button className='btn btn-primary m-3'>搜索</button>
      </form>
      <hr />
      <div>
        {nameSurname.map((el, i) => (
          <p key={i} className='m-2 text-danger'>{el}</p>
        ))}
        <button className='btn btn-info m-3' onClick={writeJob}>Job</button>
        {/* 显示职业查询结果 */}
        <p>{jobResult}</p>
      </div>
    </>
  );
}

export default App;

关键修改点 #

• 调整save函数：将输入的字符串直接存入nameSurname数组，而非存储对象，便于后续提取姓名和姓氏
• 新增jobResult状态：用于存储职业查询的结果，实现页面动态展示
• 重构writeJob函数：
  1. 先校验是否已输入姓名和姓氏（数组长度需≥2）
  2. 从数组中提取姓名和姓氏，使用find方法精准匹配user数组中的人员
  3. 根据匹配结果更新jobResult，反馈给用户
• 优化页面渲染：将原数组中对象的search属性改为直接渲染字符串，修正展示逻辑

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