Question

我试图通过REST API调用呈现一个列表，并在每次添加，删除或更新新项目时重新呈现它。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({});
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [fetchData]);


  const handleClick = () => {
    fetchData();
  }

  return (
    <button onClick={handleClick}>Go</button>
  );
}
export default App;

当组件加载时，它执行useEffect方法，但是当我单击“转到”按钮时它不起作用。有没有一种方法可以执行我的REST API调用并刷新我的对象列表？

谢谢。

Answer 1

您可以创建一个state属性，并在onClick处理程序中对其进行切换。然后在useEffect的依赖项数组中使用此属性。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({});
  const [refetch, setRefetch] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [refetch]);


  const handleClick = () => {
    setRefetch(!refetch);
  }

  return (
    <button onClick={handleClick}>Go</button>
  );
}
export default App;

Answer 2

将data变量添加到数组中，以检查useEffect方法中事物的变化。每当data变量更改时，它应该重新呈现。

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1',
      );
      setData(result.data);
    };
    fetchData();
  }, [fetchData, data]);

Answer 3

首先，您使用的是错误的端点。请测试您的端点，它可以使用ID。而且您不需要useEffect即可通过click事件加载数据。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

const fetchData = async () => {
  const result = await axios("https://hn.algolia.com/api/v1/items/1");
  return result.data;
};

function App() {
  const [data, setData] = useState(null);

  const handleClick = async () => {
    const x = await fetchData();
    setData(x);
  };

  return (
    <>
      <button onClick={handleClick}>Go</button>
      {data && data.id}
    </>
  );
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

您可以通过此链接https://codesandbox.io/s/unruffled-bhaskara-wtl1r

进行检查

如何基于函数调用重新呈现React组件？

3 个答案: