我正在学习Reaction,特别是试图通过搜索过滤数据.到现在为止还好.

当我试图从输入中清除结果时,我得到的是搜索的数据,而我想要的是所有的初始数据.

我怎么才能解决这个问题呢?

import { FC, useEffect, useState } from 'react';

import './style.css';

export const App: FC<{ name: string }> = ({ name }) => {
  const [users, setUsers] = useState([]);
  const [searched, setSearched] = useState('');
  useEffect(() => {
    async function getUsers() {
      let response = await fetch(
        'https://jsonplaceholder.typicode.com/users'
      ).then((response) => response.json());
      setUsers(response);
    }
    getUsers();
  }, []);

  useEffect(() => {
    if (searched.length >= 2) {
      async function getUsers() {
        let response = await fetch(
          'https://jsonplaceholder.typicode.com/users'
        ).then((response) => response.json());
        setUsers(
          response.filter((resp) =>
            resp.name.toLowerCase().includes(searched.toLowerCase())
          )
        );
      }
      getUsers();
    }
  }, [searched]);

  return (
    <>
      <input
        type="text"
        placeholder="Enter name"
        value={searched}
        onChange={(ev) => setSearched(ev.target.value)}
      />
      {users && users.map((user) => <p>{user.name}</p>)}
    </>
  );
};

推荐答案

当您使用此条件if (searched.length >= 2) {时,您正在阻止自己处理空搜索字符串.删除它可以处理短搜索字符串或空搜索字符串.

但是,您也可以加载相同的数据,然后在组件中手动筛选它.相反,只需加载一次状态,并在组件主体中对其进行筛选:

export const App: FC<{ name: string }> = ({ name }) => {
  const [users, setUsers] = useState([]);
  const [searched, setSearched] = useState('');
  
  useEffect(() => {
    async function getUsers() {
      let response = await fetch(
        'https://jsonplaceholder.typicode.com/users'
      ).then((response) => response.json());
      setUsers(response);
    }
    getUsers();
  }, []);
  
  const list = searched 
    ? users.filter(resp => resp.name.toLowerCase().includes(searched.toLowerCase());
    : users;

  return (
    <>
      <input
        type="text"
        placeholder="Enter name"
        value={searched}
        onChange={(ev) => setSearched(ev.target.value)}
      />
      {list && list.map(user => <p>{user.name}</p>)}
    </>
  );
};

如果列表很长,则会导致性能问题.你可能想看看go 弹力或节流阀是如何工作的.

你还应该看看useTransition号钩子-examples.

Reactjs相关问答推荐

从`redux—thunk`导入thunk `在stackblitz中不起作用

无法在列表中看到文本

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

MUiv5和TSS-Reaction SSR问题:无法可靠地处理样式定义.CSSprops 中的ArrowFunctionExpression

svg每条路径上的波浪动画

MUI 日期 Select 器 - 最小日期混乱

错误:无法获取 RSC 负载.返回浏览器导航

尽管所有页面在 Reactjs 中都是公开的,但始终导航到特定页面

强制 useEffect 仅运行一次

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

Reactjs:MUI5:MobileDateTimePicker API:如何自定义日历中的文本

如何在PrimeReact的表格中修改筛选图标功能

React - 使用 React 显示错误和积极alert

在 React 的父级中多次调用子级时从子级获取数据到父级

如何使用 React Hook Form 将寄存器作为 props 发送到子组件来收集数据?

从其他组件切换 FieldSet

更新 Next.js 路由查询更改的状态会导致无限循环

如何在 MUI 数据网格中的 renderCell 组件之间传递状态

Cypress - 在继续之前等待下一个按钮重新出现

gtag:为什么谷歌分析即使没有被授权也会收集数据