无法通过设置状态获取图像

Question

我正在尝试通过设置 const [pics, setPics] = useState([]) 来显示我的图片。在 searchPhotos 函数中，我不知道如何将 setPics 的状态设置为从 API 密钥获得的结果。我遇到了错误：“'response' is not defined no-undef”。请帮我解决我的问题！非常感谢！

App.js：

import React, { useState } from "react";

import { createApi } from "unsplash-js";

export default function App() {
  const [query, setQuery] = useState("");
  const [pics, setPics] = useState([]);

  const unsplash = createApi({
    accessKey: "//my config"
  });

  const searchPhotos = async (e) => {
    e.preventDefault();
    unsplash.search
      .getPhotos({
        query: query
      })
      .then((results) => {
        setPics(response.results);
      });
  };
  return (
    <>
      <form className="form" onSubmit={searchPhotos}>
        <label className="label" htmlFor="query">
          {" "}
          ????{" "}
        </label>{" "}
        <input
          type="text"
          name="query"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="input"
          placeholder={`Try "dog" or "apple"`}
        />{" "}
        <button type="submit" className="button">
          Search{" "}
        </button>{" "}
      </form>
      <div className="card-list">
        {" "}
        {pics.map((pic) => {
          return (
            <div className="card" key={pic.id}>
              <img
                className="card--image"
                alt={pic.alt_description}
                src={pic.urls.full}
                width="50%"
                height="50%"
              ></img>{" "}
            </div>
          );
        })}{" "}
      </div>{" "}
    </>
  );
}

沙盒链接以便更好地观察：https://codesandbox.io/s/unsplash-search-oshcc?file=/src/App.js

Answer 1

...
.then((results) => {
   setPics(response.results);
});
...

在这里，您传递了results，但尝试设置不存在的response。把它改成这样：

...
.then((results) => {
   setPics(results?.response?.results || []); // from your image
});
...

Answer 2

我试过了，成功了-

import React, { useState } from "react";

import { createApi } from "unsplash-js";

export default function App() {
  const [query, setQuery] = useState("");
  const [pics, setPics] = useState([]);

  const unsplash = createApi({
    accessKey: "Yme6ZcumIXpWryQ0DPc249CE0ua2Mxh66Y-4W2gPAAc"
  });

  const searchPhotos = async (e) => {
    e.preventDefault();
    unsplash.search
      .getPhotos({
        query: query
      })
      .then((results) => {
        setPics(results.response.results);
      });
  };
  return (
    <>
      <form className="form" onSubmit={searchPhotos}>
        <label className="label" htmlFor="query">
          {" "}
          ?{" "}
        </label>{" "}
        <input
          type="text"
          name="query"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          className="input"
          placeholder={`Try "dog" or "apple"`}
        />{" "}
        <button type="submit" className="button">
          Search{" "}
        </button>{" "}
      </form>
      <div className="card-list">
        {" "}
        {pics.map((pic) => {
          return (
            <div className="card" key={pic.id}>
              <img
                className="card--image"
                alt={pic.alt_description}
                src={pic.urls.full}
                width="50%"
                height="50%"
              ></img>{" "}
            </div>
          );
        })}{" "}
      </div>{" "}
    </>
  );
}