时间戳

首页 > 解决方案 > 在 REACT 中跨多个页面显示来自 API 的所有字符

reactjs - 在 REACT 中跨多个页面显示来自 API 的所有字符

问题描述

我是编程的初学者，我正在尝试使用此 API 构建一个显示所有 Rick 和 Morty 角色的反应应用程序：

https://rickandmortyapi.com/api/character?page=${pages}

使用 fetch，我只能得到前 20 个字符。这是我的代码：

    fetch("https://rickandmortyapi.com/api/character")
      .then((res) => res.json())
      .then((data) => setCharacters(data.results));
  }, []);

我尝试使用 axios，但它不会出现在我的 package.json 中。

我还真的很想制作映射字符的函数并构建按物种和性别过滤它们的按钮。

const [characters, setCharacters] = useState([]);
  return (
    <div>
      {character.filter(character => character.gender = "Male").map(filteredCharacter => (
        <li>
          {filteredCharacter.gender}
        </li>
      ))}
    </div>
  );
}

export default App;

我有很多错误。帮我？

标签： reactjsapiaxiosfetch

解决方案

获取所有数据，然后将其添加到您的状态：

const [characters, setCharacters] = useState([]);
  useEffect(() => {
    fetchData("https://rickandmortyapi.com/api/character");
  }, []);

  const fetchData = async (url) => {
    const res = await fetch(url);
    const data = await res.json();
    setCharacters((_characters) => {
      return [..._characters, ...data.results];
    });
    if (data.info && data.info.next) {
      fetchData(data.info.next);
    }
  };

推荐阅读