React中点击按钮筛选数组并展示结果功能不生效问题排查

问题原因 #

你的代码存在3个核心错误导致筛选功能异常：

• 接口返回的id是数字类型，你在filter判断时用严格相等===和字符串'1'/'2'对比，类型不匹配永远筛选不到结果
• 直接修改了存储接口原始全量数据的fetchData状态，筛选后全量数据会被覆盖，点击「Show all」也无法恢复完整列表
• renderdata函数的else分支没有写return，无数据时不会渲染提示内容

修复后的完整代码 #

import React, {useEffect, useState} from "react";
import axios from 'axios';
import "./style.css";

export default function App() {
  // 保留原始全量数据，永远不修改
  const [originalData, setOriginalData] = useState([]);
  // 存储筛选后的数据，渲染用这个状态
  const [filteredData, setFilteredData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  const url = 'https://jsonplaceholder.typicode.com/todos';

  useEffect(() => {
      let mounted = true;
      const loadData = async () => {
          try {
              const response = await axios(url);
              if (mounted) {
                  setOriginalData(response.data);
                  // 初始默认展示全部数据
                  setFilteredData(response.data);
                  setLoading(false);
                  setIsError(false);
              }
          } catch (err) {
              setIsError(true)
              setLoading(false);
              setOriginalData([]);
              setFilteredData([]);
              console.log(err);
          }
      };
      loadData();
      return () => {
          mounted = false;
      };
  },[url]);


  const renderdata = () => {
    if (filteredData.length) {
      return (
        <div>{filteredData.map(inner => {
          return (
            <React.Fragment key={inner.id}>
            <p>{inner.title}</p>
            </React.Fragment>
          )
        })}</div>
      )
    } else {
      // 补全return逻辑
      return <p>No data to display!</p>
    }
  }

  const handle1 = () => {
    // 用原始全量数据筛选，id改为数字匹配
    const result1 = originalData.filter((inner) => inner.id === 1);
    setFilteredData(result1);
  }

  const handle2 = () => {
    const result2 = originalData.filter((inner) => inner.id === 2);
    setFilteredData(result2);
  }

  const handleAll = () => {
    // 直接恢复原始全量数据
    setFilteredData(originalData);
  }


  return (
    <div>
      <button onClick={handleAll}>Show all</button>
      <button onClick={handle1}>Filter by id 1</button>
      <button onClick={handle2}>Filter by id 2</button>
      {renderdata()}
    </div>
  );
}

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