Question

我正在尝试使用“ Rick and Morty” REST API来构建应用程序。我已经创建了“ card.js”组件，该组件可从API提取字符，名称，id，种类等数据，并且正在“ cardList.js”组件中映射卡。

我正在尝试做的事情：

1）我正在尝试在应用程序顶部实现搜索栏，该搜索栏将根据我搜索的内容显示特定的卡片，假设我搜索了“ Rick”，它将显示所有名称中带有“ Rick”的卡。 2）此外，我们还可以搜索与我在卡中指定的参数（例如性别，类型等）相关的任何内容。

我已经尝试过的东西：

1）我创建了一个名为“ Search2.js”的组件 2）在此组件中，我有一个“表单”，其中包含输入类型，以及一个按钮，用于搜索用户输入的输入。 3）在“ cardList.js”组件中，我将“ Search2.js”组件传递到了“ card.js”组件上，因此它位于顶部（搜索栏和按钮） 4）我正在映射“ CardList.js”组件中的“ Search2.js”，以将字符作为道具传递给“ Search2.js”组件中，而且幸运的是，我将所有字符我正在做console.log（{this.props.name}）的控制台。

问题： 1）我很困惑如何将个人名称（来自this.props.name）与表单“ Search2.js”组件中提供的输入进行比较 2），但是我得到的只是我的表单，该表单被映射了493次（这是API中的字符数）

我的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;

我的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;

我的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

如何实现使用API来获取信息的搜索栏

1 个答案:

如何实现使用API​​来获取信息的搜索栏

1 个答案:

如何实现使用API来获取信息的搜索栏