React Hook 查找用户

Question

我正在尝试将 React useState Hook 用于在线项目。我想要发生的是，当我在搜索框中键入用户名时，它会在浏览器上找到用户名片。我能够将用户登录到控制台，但我仍然不知道如何让它在屏幕上呈现。尝试了很多方法，就是没有得到它。

console output

App.js

import React, { useState } from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';


function App() {

  let [searchInput] = useState('');

  function onSearchChange(e) {

    searchInput = e.target.value;

    const filteredRobots = robots.filter(function(robot){
      return robot.name.toLowerCase().includes(searchInput.toLowerCase());
    });

    console.log(filteredRobots);

  }



  return (
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox searchChange={onSearchChange} />
      <CardList id={robots.id} name={robots.name} email={robots.email}/>
    </div>
  );
}

export default App;

CardList.js

import React from 'react';
import Card from './Card';
import {robots} from './robots';

function CardList(props) {
  return (
    <div>
    {
      robots.map(function(user) {
        return <Card key={user.id} id={user.id} name={user.name} email={user.email} />
      })
    };
  </div> )
}

export default CardList;

Card.js

import React from 'react';
import 'tachyons';


function Card(props) {
  return (
    <div className='bg-light-green dib br3 pa3 ma2 grow shadow-5'>
      <img src={`https://robohash.org/${props.id}`} alt="Robot" />
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

export default Card;

Answer 1

仅当您将状态设置为新值时，React 才会重新渲染。

检查下面的代码：

import React, { useState } from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';


function App() {

  let [searchInput, setSeachInput] = useState('');

  function onSearchChange(e) {
    
    // set state here to re-render
    setSeachInput(e.target.value);
  }

  // use might want to use useMemo to improve this, I just want to make it simple now
   const filteredRobots = robots.filter(function(robot){
      return robot.name.toLowerCase().includes(searchInput.toLowerCase());
    });

    console.log(filteredRobots);


  return (
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox searchChange={onSearchChange} />
      {/* using filteredRobots herer*/}
      <CardList id={filteredRobots.id} name={filteredRobots.name} email={filteredRobots.email}/>
    </div>
  );
}

export default App;

Answer 2

在您的 App.js 文件中，searchInput 未设置为状态

import React, { useState } from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';


function App() {

  let [searchInput, setSearchInput] = useState('');

  function onSearchChange(e) {
    setSearchInput(e.target.value)   

  }
    **You can pass the filterRobots in place of robots to get only words passed in the search box**


 const filteredRobots = robots.filter(function(robot){
      return robot.name.toLowerCase().includes(searchInput.toLowerCase());
    });



  return (
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox searchChange={onSearchChange} />
      <CardList robots={filteredRobots}/>
    </div>
  );
}

export default App;

在 CardList 文件中

import React from 'react';
import Card from './Card';


 function CardList({robots}) {
  {
    robots.map((user, i) => {
      return (
        <Card
          key={i}
          id={user[i].id}
          name={user[i].name}
          email={user[i].email}
          />
      );
    })
  }
}

export default CardList;

Answer 3

您不应该像 searchInput = e.target.value 那样改变 searchInput 值。最好调用一个 setter 函数来更新值。例如，

const [searchInput, setSearchInput] = useState('');

// to update the value of searchInput call setSearchInput
function onSearchChange(e) {
    setSearchInput(e.target.value)
}

状态变化是异步的。当您尝试过滤 robots 时，不能保证会使用 searchInput 的最新值调用它，这就是为什么您应该使用 useEffect 挂钩，它会在值时过滤机器人searchInput 个更改。

这是一个解决方案，

import React, { useState } from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';


function App() {

  let [searchInput, setSearchInput] = useState('');
  let [filterdRobots, setFilteredRobots] = useState(robots);

  function onSearchChange(e) {
    setSearchInput(e.target.value);
  }

  useEffect(() => {
     setFilteredRobots(robots.filter(r =>
       r.name.toLowerCase().includes(searchInput.toLowerCase())))
  }, [searchInput, robots])



  return (
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox searchChange={onSearchChange} />
      <CardList robots={filteredRobots}/>
    </div>
  );
}

export default App;

检查 codesanbox 以获得演示

React Hook 查找用户

React Hook to find user

javascript

reactjs

react-hooks

use-state