React查找用户

Question

我正在尝试使用React钩子作为一个在线项目。我想要做的是，当我在搜索框中键入用户名时，它会在浏览器上找到用户卡。我可以将用户登录到控制台，但在如何使其在屏幕上呈现时我陷入了困境。尝试了这么多方法却没有得到它。

控制台输出

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

在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 2

只在将状态设置为新值时才作出反应。

检查下面的代码：

​

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 3

您不应该像searchInput那样改变searchInput = e.target.value值。最好调用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;

查看码箱以获得演示