Question

使用 UseEffect 从 API 获取数据

2021-09-11

101

reactjs

我发现一个返回单词及其定义的 API。

我想显示一个单词及其定义，当按下按钮时，它应该重新获取并显示新单词。

我写了这段代码。但我无法让它工作。我不确定我做错了什么。

我不想使用 Axios 或任何库

import React, { useEffect, useState, Button } from "react";

function RandomWord() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [refetch, setRefetch] = useState(false);

  useEffect(() => {
    fetch("https://rnd-word.vercel.app/word")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, [refetch]);

  return (
    <>
      <div class="App">
        {isLoading ? (
          <p>Loading...</p>
        ) : (
          <span
            data={data}
            keyExtractor={({ id }, index) => id}
            renderItem={({ item }) =>
            <p>{item.word}</p>
            <p>{item.defintion}</p>
          }
          />
        )}
      </div>
      <Button
        title="New Word"
        onPress={() => setRefetch(!refetch)}
        color="#e56b6f"
      />
    </>
  );
}

export default RandomWord;

Answer 1

<span> html 元素没有 renderItem 或 keyExtractor 等属性。当您想要呈现 data 时，您应该将其映射到 JSX。

data.map((item, index) => 
  <div key={index}>
      <p>{item.word}</p>
      <p>{item.definition}</p>
  </div>

您还可以直接调用获取数据的函数，而不必触发另一个仅触发获取的重新渲染。

function fetchNextWord(){
  setLoading(true);
  fetch("https://rnd-word.vercel.app/word")
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}

useEffect(fetchNextWord, []); // Initial load

您可以运行此示例代码片段：

const { useState, useEffect } = React;

function RandomWord() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  
  function fetchNextWord(){
    setLoading(true);
    fetch("https://rnd-word.vercel.app/word")
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }
  
  useEffect(fetchNextWord, []); // Initial load


  return (
    <div>
      <div className="App">
        {isLoading ? (
          <p>Loading...</p>
        ) : 
          data.map((item, index) => 
           <div key={index}>
               <p>{item.word}</p>
               <p>{item.definition}</p>
           </div>
          )
        }
      </div>
      <button
        onClick={fetchNextWord}
        color="#e56b6f"
        >New Word</button>
    </div>
  );
}

ReactDOM.render(<RandomWord />, document.getElementById("root"));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

<span> 标签在 reactjs 中只显示普通文本。不像 react-native 中的 FlatList 。因此你应该使用 map 来呈现，如下所示：

{
    isLoading ? (
        <p>Loading...</p>
    ) : (
        data.map((item, index) => (
            <div key={index}>
                <p>{item.word}</p>
                <p>{item.defintion}</p>
            </div>
        ))
    );
}

Answer 3

我会在您的提取中执行 console.log(json) 。查看数据是否按预期发送并正确填充数据状态。

Parker Pfaff

2021-09-11