React筛选功能失效求助：基于companyId过滤items数据失败

我有两组对象数组数据：companies.json和items.json，其中companies.json的id是唯一标识，items.json的companyId字段关联companies的id。我已经成功获取并分离了数据，但筛选companyId为指定值的items时，返回了全部items数据，无法实现预期筛选效果。以下是我的代码：

const MyList = () => {
  // 存储输入框中输入的公司名称
  const [companyInput, setCompanyInput] = useState('');

  // 存储companies.json中的公司列表
  const [companiesList, setCompaniesList] = useState([]);

  useEffect(() => {
    fetch('/data/companies.json')
      .then(response => response.json())
      .then((response) => setCompaniesList(response))
  }, []);

  // 存储选中公司的id
  const [companyId, setCompanyId] = useState('');

  // 更新输入框的公司名称状态
  const handleCompanyInput = (ev) => {
    setCompanyInput(ev.target.value);
  }

  // 根据输入的公司名称匹配对应的公司id
  const HandleIdCompany = () => {
    const companyObj = companiesList.find((item) => item.name.toLowerCase() == companyInput.toLowerCase());
    setCompanyId(companyObj.id)
  };

  // 存储items.json中的商品列表
  const [items, setItems] = useState([]);
  
  useEffect(() => {
    fetch('/data/items.json')
      .then(response => response.json())
      .then((response) => setItems(response))
  }, []);

  console.log(`items ===> ${JSON.stringify(items)}`); // [{},{}]
  console.log(`companyId ===> ${JSON.stringify(companyId)}`); // 13334

  // 筛选相关状态（未用到）
  const [filterItems, setFilterItems] = useState();

  useEffect(() => {
    setFilterItems(items);
  }, [items]);

  console.log(`filterItems ===> ${JSON.stringify(filterItems)}`); // [{},{}]

  // 筛选逻辑（存在错误）
  const filteredUsers = items.filter(item => item.id = companyId);

  return (
    <div>
      <DivCntr>
        <label>Enter Company Name</label>
        <input placeholder='Type a company' id='coinput' type='text' onChange={handleCompanyInput} />
        <button onClick={HandleIdCompany}>Get the id for this specific company</button>
        <button >Get the list of items for this specific company</button>
      </DivCntr>
      <div>
        <p>{companyInput}</p>
        <p>{companyId}</p>

        <ul>
          {filteredUsers.map(item => (
            <li key={item._id}>{item.name}</li>
          ))}
        </ul>

      </div>
    </div>
  )
}

问题原因与修复方案 #

1. 筛选条件的核心错误 #

你在筛选时犯了两个关键错误：

• 使用**赋值运算符=**而非相等判断运算符===：item.id = companyId是赋值操作，会把companyId赋值给item.id，表达式结果永远为true，导致所有项都被保留。
• 字段匹配错误：需要匹配的是items的companyId字段，而非item.id。
• 修复后的筛选逻辑：

  const filteredUsers = items.filter(item => item.companyId === companyId);
  

2. 筛选结果的自动更新优化 #

当前filteredUsers会在组件每次渲染时自动计算，为了避免空值导致的渲染错误，可以添加判断：

const filteredUsers = companyId ? items.filter(item => item.companyId === companyId) : [];

3. 避免潜在报错的优化 #

HandleIdCompany中如果找不到匹配的公司，companyObj会是undefined，直接访问companyObj.id会抛出错误，需要添加容错处理：

const HandleIdCompany = () => {
  const companyObj = companiesList.find((item) => item.name.toLowerCase() === companyInput.toLowerCase());
  setCompanyId(companyObj?.id || ''); // 使用可选链操作符避免报错
};

4. 冗余代码清理 #

filterItems相关的状态和useEffect没有实际作用，可以直接删除，简化组件逻辑。

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