如何让 React App 只过滤一个项目

Question

按照 Andrei Neagoie 在 Udemy 上的课程，我正在制作这个机器人应用程序来显示和过滤从 API 获得的数据。我对其进行了一些自定义并添加了轮播功能，但是现在，当我点击搜索框并尝试过滤它显示多个项目。 我希望它只显示一项，我该怎么做？
这是我遇到的问题： https://imgur.com/fsgesBs

应用程序.js

import React, { Component } from 'react'
//import CardList from './components/CardList';
import SearchBox from './components/SearchBox';
import Splider from './components/Splider';

class App extends Component {
  constructor(){
    super()
    this.state = {
      robots: [],
      searchField: ''
    }
  }

  componentDidMount(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(res => {
        return res.json();
      })
      .then(users => {
        this.setState({
          robots: users
        });
      });
    
  }

  onSearchChange = (e) => {
    this.setState({
      searchField: e.target.value 
    });
  }

  render() {
    const filtered = this.state.robots.filter(robot => {
      return robot.name.toLowerCase().includes(this.state.searchField.toLowerCase());
    });

    // Main Render
    return (
      <div className="App tc">
        <h1>RoboBros!</h1>
        <SearchBox searchChange={this.onSearchChange}/>
        <Splider robots={filtered}/>
        {/* <CardList robots={filtered}/> */}
      </div>
    )
  }
}

export default App

搜索框.js

import React from 'react'
import '../index.css'

const SearchBox = ({ searchChange, searchField }) => {
    return (
        <div className="search-div">
            <input className="search-box center" type="search" placeholder="Search Robots" onChange={searchChange}/>
            <button className="search-btn">Search</button>
        </div>
    )
}

export default SearchBox;

Cards.js（个人卡片物品）

import React from 'react'
import '../styles/Cards.css';

const Cards = ({ name, id, email }) => {
    return (
        <div className="cards-wrapper dib br3 pa3 ma2 grow pointer">
            <img className="cent" src={`https://robohash.org/${id}?set=set3`} alt="robots"/>
            <div className="text">
                <h3>{name}</h3>
                <h4>{email}</h4>
            </div>
        </div>  
    )
}

export default Cards;

CardList.js

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

const CardList = ({robots}) => {
    const cardComponent = robots.map((robot, i) => {
        return <Cards key={i} id={robots[i].id} name={robots[i].name} email={robots[i].email}/>;
    })

    return(
        <div>
            {cardComponent}
        </div>
    );
}

export default CardList;

Splider.js（包含 Carousel/Slider 库的组件）

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
import '../styles/Cards.css';

const Splider = ({robots}) => {
    const cardSplide = robots.map((robot, i) => {
        return (
            <SplideSlide key={i} className="cards-wrapper dib br3 pa3 ma2">
                <img src={`https://robohash.org/${robots[i].id}?set=set3`} alt="robots"/>
                <h3>{robot.name}</h3>
                <h4>{robot.email}</h4>
            </SplideSlide>
        );
    });

    return(
        <Splide options={{
            rewind: true,
            width: '100%',
            gap: '1rem',
            perPage: 3,
            perMove: 1,
            focus: 'center',
            type: 'loop',
            easing: 'ease',
        }}>
            {cardSplide}
        </Splide>
    );
}

export default Splider;

Answer 1

问题在于type: loop选项：

import React from "react";
import { Splide, SplideSlide } from "@splidejs/react-splide";
import "@splidejs/splide/dist/css/themes/splide-sea-green.min.css";
import "../styles/Cards.css";

const Splider = ({ robots }) => {
  return (
    <Splide
      options={{
        rewind: true,
        width: "100%",
        gap: "1rem",
        perPage: 3,
        perMove: 1,
        focus: "center",
        //type: "loop",
        easing: "ease"
      }}
    >
      {robots.map((robot, i) => {
        return (
          <SplideSlide key={robot.id} className="cards-wrapper dib br3 pa3 ma2">
            <img
              src={`https://robohash.org/${robot.id}?set=set3`}
              alt="robots"
            />
            <h3>{robot.name}</h3>
            <h4>{robot.email}</h4>
          </SplideSlide>
        );
      })}
    </Splide>
  );
};

export default Splider;

这是splidejs项目中的问题： https://github.com/Splidejs/splide/issues/145
它显示为已修复，因此您可能需要等待react-splide将修复程序也包含在它的最新版本中。