Javascript 搜索栏激发但更改不生效-React钩子

我正在尝试使用Ant.Design search组件进行搜索筛选，我仔细阅读了他们的文档，但它启动了，searchQuery状态发生了变化，但什么也没发生

在我的控制台中，我还可以看到它触发了两次，所以它被记录了两次，我不知道为什么

任何帮助都将不胜感激

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Layout, Loading } from "../components";
import { Table, Input, Button, Space } from "antd";
import { set } from "react-ga";
// import config from '../config.json';

const { Search } = Input;

const Overview = () => {
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [devices, setDevices] = useState([]);

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Type",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "Balance",
      dataIndex: "phone",
      key: "phone",
    },
    {
      title: "Status",
      dataIndex: "website",
      key: "website",
    },
    {
      title: "",
      dataIndex: "",
      key: "website",
    },
  ];

  useEffect(() => {
    async function callApi() {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      const devices = response.data;
      setDevices(devices);
      // const response = await axios.get(`${config.serverAPI}/devices`);
      // const devices = response?.data?.status === 'success' && response?.data?.devices;
      // console.log("Devices", devices);

      await localStorage.setItem("devices", JSON.stringify(devices));
      setLoading(false);
    }
    callApi();
  }, [searchQuery]); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <Layout>
      <div className="overview-page-wrapper">
        {loading ? (
          <Loading />
        ) : (
          <div>
            <Search
              placeholder="Search for devices"
              value={searchQuery}
              onChange={(e) => {
                const currSearchValue = e.target.value;
                setSearchQuery(currSearchValue);
                const filteredDevices = devices.filter((device) => device.name.toLowerCase().includes(currSearchValue));
                setDevices(filteredDevices);
              }}
            />
            {console.log(searchQuery)}
            <div>
              <Table columns={columns} dataSource={devices} />
            </div>
          </div>
        )}
      </div>
    </Layout>
  );
};

export default Overview;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“./组件”导入{Layout，Loading}；
从“antd”导入{表、输入、按钮、空格}；
从“react ga”导入{set}；
//从“../config.json”导入配置；
const{Search}=输入；
常量概览=（）=>{
const[loading，setLoading]=useState（true）；
const[searchQuery，setSearchQuery]=useState（“”）；
const[devices，setDevices]=useState（[]）；
常量列=[
{
标题：“姓名”，
数据索引：“名称”，
键：“名称”，
},
{
标题：“类型”，
数据索引：“用户名”，
密钥：“用户名”，
},
{
标题：“余额”，
数据索引：“电话”，
按键：“手机”，
},
{
标题：“地位”，
数据索引：“网站”，
关键词：“网站”，
},
{
标题：“，
数据索引：“”，
关键词：“网站”，
},
];
useffect（（）=>{
异步函数callApi（）{
const response=等待axios.get(`https://jsonplaceholder.typicode.com/users`);
const devices=response.data；
设置设备（设备）；
//const response=wait axios.get（`${config.serverAPI}/devices`）；
//const devices=response？.data？.status==“成功”和&response？.data？.devices；
//控制台日志（“设备”，设备）；
等待localStorage.setItem（“设备”，JSON.stringify（设备））；
设置加载（假）；
}
callApi（）；
}，[searchQuery]）；//eslint禁用行反应挂钩/deps
返回(
{加载(
) : (
{
const curresearchValue=e.target.value；
setSearchQuery（currSearchValue）；
const filteredDevices=devices.filter（（device）=>device.name.toLowerCase（）.includes（curresearchValue））；
设置设备（过滤设备）；
}}
/>
{console.log（searchQuery）}
)}
);
};
导出默认概述；

尝试尽可能少地修改代码。我想做三点改变

1-从第一个效果中删除

searchQuery

依赖项

  useEffect(() => {
    async function callApi() {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      const devices = response.data;
      setDevices(devices);
      // const response = await axios.get(`${config.serverAPI}/devices`);
      // const devices = response?.data?.status === 'success' && response?.data?.devices;
      // console.log("Devices", devices);

      await localStorage.setItem("devices", JSON.stringify(devices));
      setLoading(false);
    }
    callApi();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

2-添加

filterdDevices

状态和效果

const [filterdDevices, setFilteredDevices] = useState([]);

useEffect(() => {
    const filtered = devices.filter(device =>
      device.name.toLowerCase().includes(searchQuery)
    );
    setFilteredDevices(filtered);
}, [searchQuery, devices]);

3-在选择组件时简化更改

<Search
    placeholder="Search for devices"
    value={searchQuery}
    onChange={e => {
      const currSearchValue = e.target.value;
      setSearchQuery(currSearchValue);
    }}
/>

{
const curresearchValue=e.target.value；
setSearchQuery（currSearchValue）；
}}
/>

尝试尽可能少地修改代码。我想做三点改变

1-从第一个效果中删除

searchQuery

依赖项

  useEffect(() => {
    async function callApi() {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/users`);
      const devices = response.data;
      setDevices(devices);
      // const response = await axios.get(`${config.serverAPI}/devices`);
      // const devices = response?.data?.status === 'success' && response?.data?.devices;
      // console.log("Devices", devices);

      await localStorage.setItem("devices", JSON.stringify(devices));
      setLoading(false);
    }
    callApi();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

2-添加

filterdDevices

状态和效果

const [filterdDevices, setFilteredDevices] = useState([]);

useEffect(() => {
    const filtered = devices.filter(device =>
      device.name.toLowerCase().includes(searchQuery)
    );
    setFilteredDevices(filtered);
}, [searchQuery, devices]);

3-在选择组件时简化更改

<Search
    placeholder="Search for devices"
    value={searchQuery}
    onChange={e => {
      const currSearchValue = e.target.value;
      setSearchQuery(currSearchValue);
    }}
/>

{
const curresearchValue=e.target.value；
setSearchQuery（currSearchValue）；
}}
/>