Как реализовать панель поиска, которая выбирает информацию с помощью API

Question

Я пытаюсь создать приложение, используя REST API "Rick and Morty". Я создал компонент "card.js", который извлекает данные из API, такие как символы, имя, идентификатор, виды, и я сопоставляю карты в моем компоненте "cardList.js".

Что яя пытаюсь сделать:

1) Я пытаюсь реализовать панель поиска поверх приложения, которая будет отображать конкретную карту на основе того, что я искал, скажем, япроизвел поиск "Rick", поэтому он будет отображать все карты с именем "Rick". 2) Кроме того, мы также можем искать все, что связано с параметрами, указанными в карточке, такими как пол, тип и т. Д.

Что я уже пробовал:

1) Я создал компонент под названием «Search2.js» 2) В этом компоненте у меня есть «форма», которая содержит тип ввода, и кнопка для поиска вводакоторый пользователь ввел. 3) В компоненте «cardList.js» я передал компонент «Search2.js» над компонентом «card.js», чтобы он оставался вверху (панель поиска и кнопка) 4) Я сопоставляю «Search2.js» в моем компоненте «CardList.js», чтобы передать символы в качестве реквизита в моем «Search2.js» компоненте, и, к счастью, я получаю все символы в моей консоли, когда яя делаю console.log ({this.props.name}).

Проблема: 1) Я запутался, как мне сравнивать отдельные имена (из этого.props.name)с вводом, который я предоставил в форме в компоненте «Search2.js» 2) Я пытался, но все, что я получаю, это моя форма, которая отображается более 493 раз (это число символов вAPI)

Компонент My Card.js:

import React from "react";

class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>ID: {this.props.id}</h1>
        <img src={this.props.imgURL} alt="Image failed to load" />
        <h1>NAME: {this.props.name}</h1>
        <h2>STATUS: {this.props.status}</h2>
        <h3>SPECIES: {this.props.species}</h3>
        <h3>GENDER: {this.props.props}</h3>
        <h4>TYPE: {this.props.type}</h4>
      </div>
    );
  }
}

export default Card;

Компонент My CardList.js:

import React from "react";
import axios from "axios";
import Card from "./Card";
import Search from "./Search";
import Search2 from "./Search2";

class CardList extends React.Component {
  state = {
    // url: `https://rickandmortyapi.com/api/character/${[...Array(494).keys()]}`,
    character: []
  };

  async componentDidMount() {
    //const res = await axios.get(this.state.url);
    const ids = Array(493)
      .fill(null)
      .map((_, idx) => idx + 1)
      .join(","); // '1,2,3...,300'
    const url = `https://rickandmortyapi.com/api/character/[${ids}]`;
    const res = await axios.get(url);

    this.setState({
      character: res.data
    });
  }

  render() {
    return (
      <div>
        {this.state.character.map(character => (
          <Search2 name={character.name} />
        ))}
        {this.state.character.map(character => (
          <Card
            key={character.id}
            imgURL={character.image}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

export default CardList;

Компонент My Search2.js:

import React from "react";

class Search2 extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    const searchValue = event.target.value;

    if (searchValue === "{this.props.name}") {
      console.log("matched");
    } else {
      console.log("doesnt match");
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <p>
          <input type="text" placeholder="Enter character" name="fullName" />
        </p>
        <p>
          <button>Search2</button>
        </p>
      </form>
    );
  }
}

export default Search2;

Помоги мне, пожалуйста !!

Answer 1

Моя идея помочь вам решить эту проблему выглядит следующим образом:

render() {
    return (
      <div>

        {
let filter=this.state.character.filter(function(e)
{
//here you can filter out anything you want, for example:
return e.name.includes("Rick") // <- this will check the data you already got from axios //to filter out for every name that contains "Rick', you can then replace "Rick" with your input's value, using State or anything you like
}

filter.map(character => (
          <Card
            key={character.id}
            imgURL={character.image}
            id={character.id}
            name={character.name}
            status={character.status}
            species={character.species}
            gender={character.gender}
            type={character.type ? character.type : "Unknown"}
          />
        ))}
      </div>
    );
  }
}

таким образом, вы сначала отфильтруете данные, затем отобразите это, как делали раньше, но на этот раз будут отображаться только записи. которые проходят через ваш процесс фильтрации

Здесь вы можете проверить идею, стоящую за этим JSFIDDLE