如何使用reactjs从多个API获取搜索结果

debugcn 发表于 Dev

艾伯塔省

我是ReactJS的新手，我试图通过从多个API提取数据来创建带有React的搜索功能。以下是Search.js文件。我尝试了很多次以使其发挥作用，并使结果在键入时实时显示。但是，我继续收到此错误消息TypeError：values.map不是function。我在哪里出错，该如何解决？

function Search() {
  const [input, setInput] = useState("");
  const [results, setResults] = useState([]);

  const urls = [
    'https://jsonplaceholder.typicode.com/posts/1/comments',
    'https://jsonplaceholder.typicode.com/comments?postId=1'
  ]

  Promise.all(urls.map(url => fetch(url)
    .then((values) => Promise.all(values.map(value => value.json())))
    .then((response) => response.json())
    .then((data) => setResults(data))
    .catch(error => console.log('There was a problem!', error))

  ), [])

  const handleChange = (e) => {
    e.preventDefault();
    setInput(e.target.value);
  }
  if (input.length > 0) {
    results.filter((i) => {
      return i.name.toLowerCase().match(input);
    })
  }
  return ( <
    div className = "search"
    htmlFor = "search-input" >
    <
    input type = "text"
    name = "query"
    value = {
      input
    }
    id = "search"
    placeholder = "Search"
    onChange = {
      handleChange
    }
    /> {
    results.map((result, index) => {
        return ( <
            div className = "results"
            key = {
              index
            } >
            <
            h2 > {
              result.name
            } < /h2> <
            p > {
              result.body
            } < /p> {
            result
          } <
          /div>
      )
    })

} </div>

)
}

.search {
  position: relative;
  left: 12.78%;
  right: 26.67%;
  top: 3%;
  bottom: 92.97%;
}

.search input {
  /* position: absolute; */
  width: 40%;
  height: 43px;
  right: 384px;
  margin-top: 50px;
  top: 1.56%;
  bottom: 92.97%;
  background: rgba(0, 31, 51, 0.02);
  border: 1px solid black;
  border-radius: 50px;
  float: left;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  /* identical to box height */
  display: flex;
  align-items: center;
  /* Dark */
  color: #001F33;
}


/* Search Icon */

input#search {
  background-repeat: no-repeat;
  text-indent: 50px;
  background-size: 18px;
  background-position: 30px 15px;
}

input#search:focus {
  background-image: none;
  text-indent: 0px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

德鲁·里斯（Drew Reese）

问题

你得到的回应fetch(url)是只是一个单一的响应，所以没有什么映射。
数据获取发生在组件的功能主体中，因此在工作时这会导致渲染循环，因为每个渲染周期都会获取数据并更新状态。
在input.length > 0过滤前返回什么也不做，因为返回的滤波阵列不会被保存，它的子串还错误地搜索。
尝试result在render函数中渲染对象，对象是无效的JSX

解

跳过这.then((values) => Promise.all(values.map((value) => value.json())))一步，然后继续访问JSON数据。
将获取的数据移动到安装useEffect挂钩中，以便仅运行一次。
将过滤器函数内联到渲染函数中，然后使用string.prototype.includes进行搜索。
基于其他呈现的属性以及result对象上的剩余内容，我假设您可能想呈现该email属性。

码：

function Search() {
  const [input, setInput] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    const urls = [
      "https://jsonplaceholder.typicode.com/posts/1/comments",
      "https://jsonplaceholder.typicode.com/comments?postId=1"
    ];

    Promise.all(
      urls.map((url) =>
        fetch(url)
          .then((response) => response.json())
          .then((data) => setResults(data))
          .catch((error) => console.log("There was a problem!", error))
      ),
      []
    );
  }, []);

  const handleChange = (e) => {
    e.preventDefault();
    setInput(e.target.value.toLowerCase());
  };

  return (
    <div className="search" htmlFor="search-input">
      <input
        type="text"
        name="query"
        value={input}
        id="search"
        placeholder="Search"
        onChange={handleChange}
      />
      {results
        .filter((i) => i.name.toLowerCase().includes(input))
        .map((result, index) => {
          return (
            <div className="results" key={index}>
              <h2>{result.name}</h2>
              <p>{result.body}</p>
              {result.email}
            </div>
          );
        })}
    </div>
  );
}