javascript - 搜索栏搜索组合 API React

Question

我正在制作一个带有反应前端的小型学校项目，显示来自电视节目/电影的不同角色。

我将这些字符打印到一些表格中，从 3 个不同的 API（哈利波特、星球大战和 GoT）中获取

在网站的首页上，我想要一个搜索栏功能，您可以在其中搜索所有 3 个 api 中的字符并在表格/模式中显示它们（现在无关紧要）因此我将 3 个 API 合并到一个包含它们的端点中在一个数组中

我在制作这个搜索栏功能时遇到了一些麻烦。我想要一个搜索栏，可以在其中写下角色名称的一部分，它会根据该名称建议或显示一个角色（例如，Harr 应该显示/建议哈利波特）

到目前为止，我的代码如下所示：

export default function Search({ searchingForChar }) {
  const init = [{ name: "", fullName: "" }];
  const [allCharacters, setAllCharacters] = useState(init);

  const fetchData = () => {
    console.log("test");
    if (searchingForChar !== "" || searchingForChar !== undefined) {
      searchFacade
        .searchForAllChars()
        .then((data) =>
          setAllCharacters([
            ...data.swList.results,
            ...data.hpList.hpDTOList,
            ...data.gotList.results,
          ])
        );
    }
  };

  useEffect(fetchData, [searchingForChar]);

  return (
    <>
      {allCharacters
        .filter((char) => char.name.includes(searchingForChar))
        .map((filteredPerson) => (
          <>
            <h1>Her burde stå et navn: {filteredPerson.name}</h1>
          </>
        ))}
    </>
  );
}

并在此处的表格中使用：

export default function Home() {
  const [value, setValue] = useState(),
    onInput = ({ target: { value } }) => setValue(value),
    onFormSubmit = (e) => {
      e.preventDefault();
      console.log(value);
      setValue();
    };

  return (
    <div className="container-fluid padding">
      <img className="logo" src={Dachma} alt=""></img>
      <div className="row">
        <div className="col-3"></div>
        <div className="col-6 text-center">
          <h4 className="mt-5">Search for your favorite character</h4>
          <Form onSubmit={onFormSubmit}>
            <Form.Control onChange={onInput} placeholder="Search here.." />
            <Form.Text className="text-muted">
              Type character name, movie, tv show etc.
            </Form.Text>
            <MDBBtn
              outline
              color="primary"
              rounded
              size="m"
              type="submit"
              className="mr-auto"
            >
              Search
            </MDBBtn>
          </Form>
          <Search searchingFor={value} />
        </div>
        <div className="col-3"></div>
      </div>
      <div className="row">
        <div className="col-2"></div>
        <div className="col-8">
          <h4 className="mt-5 text-center">Current shows in the site:</h4>
          <p className="mt-2 text-muted text-center">
            Click to get info about a movie/tv show.
          </p>
          <div className="flexDirection: row justifyContent: space-between">
            <Card imgToDisplay={gotImg} />
            <Card imgToDisplay={hpImg} />
            <Card imgToDisplay={swImg} />
          </div>
        </div>
        <div className="col-2"></div>
      </div>
    </div>
  );
}

我在堆栈和其他地方尝试了许多不同的方法，我似乎无法让它按预期工作

我有很多不同的错误，但现在我坚持“无法读取未定义的属性'包含'。

谁能指出我正确的方向？请知道我是 react/JS 的初学者，所以请解释一下是否可以提供帮助。

标签： javascriptreactjsapirestsearch