代码之家 › 专栏 › 技术社区 › whitebear

在“useffect()中手动调用api)`

reactjs javascript

whitebear · 技术社区 · 5 年前

我有个问题 useEffect() 功能组件的。

该脚本从服务器调用api并显示内容。

const NameList = (props) => {
  const [result, setResult] = useState([]);
  useEffect(() => {
    var url =  `http://localhost/blogs`;
    axios.get(url)
    .then((res)=> {
    setResult(res.data.items);
    })
    .catch(err=>{console.log(err);});
  }, []);
  return(  
    <TableBody>
    {
      result.map(item => {
        return (
          <TableRow key={item.id}>
          <TableCell>
          {item.name}
            </TableCell>
          </TableRow>
        )
      })
    }
    </TableBody>  
  );
}

useEffect 是有用的)。

我想手动调用api来刷新列表(例如,当在另一个组件中单击按钮时,等等)

A) 保持 ajax(axios.get) 在里面 useEffect() useEffect()

B) 制作新功能,包括 ajax 从按钮和 useEffect()

useEffect() .

非常感谢。

3 回复 | 直到 5 年前

eamanola 5 年前

创建一个新的状态变量,例如刷新。

 const [refresh, setRefresh] = useState(false);

每当您希望调用useffect时(例如在onClick处理程序中),更新refresh变量

  setRefresh(!refresh);

在use effect的最后一行,将刷新添加到useEffect依存数组中

 }, [refresh]);

现在像现在一样,在第一次渲染时调用useEffect,每次刷新状态变量都会更改。

Isaac Yong 5 年前

如果您以前使用过类组件,那么useEffect是生命周期方法的组合:componentDidMount()、componentDidUpdate()和componentWillUnmount()。如果被跟踪阵列中没有任何被跟踪状态,则useEffect仅在第一次装入组件时激发,从而实现与componentDidMount()相同的效果。

function getData() {
    var url =  `http://localhost/blogs`;
    axios.get(url)
    .then((res)=> {
    setResult(res.data.items);
    })
    .catch(err=>{console.log(err);});
}

useEffect(() => {
    getData()
},[])

然后使用单独的按钮触发该功能:

<button onClick={getData}>Get Data</button

SARAN SURYA 5 年前

因此,如果您希望在重新加载时获取数据, 使用效果 使用效果 函数并等待它,也减少了冗余,这更高效

...
// to get the data incase of conditions where we only need data and state change is not required
function functionName(){
    return new Promise((resolve, reject)=>{
        var url =  `http://localhost/blogs`;
        axios.get(url)
        .then((res)=> {
        resolve(res.data.items);
        })
        .catch(err=>{reject(err);});
    })
}
// to handle the refresh button click, 
// wire the function below to any button onClick so that refresh process will be done.
function manualRefreshOperation(){
    functionName()
    .then((res)=> {
    setResult(res);
    })
    .catch(err=>{console.log(err);});
}

useEffect(() => {
    manualRefreshOperation();
  }, []);

此过程可以帮助减少冗余,并确保您可以将其链接到任何功能

Mike 5 年前

ksav 5 年前

B) 在useffect()之外创建包含ajax的新函数,并从button和useffect()调用该函数。

在这里,我将其附加到刷新按钮上的单击处理程序。

import { useState, useEffect } from "react";
import axios from "axios";

var url = `https://rickandmortyapi.com/api/character`;

const NameList = () => {
  const [result, setResult] = useState([]);
  const [loading, setloading] = useState(false);
  const [error, seterror] = useState("");
  
  const fetchData = () => {
    setloading(true);

    // get 3 random characters
    const characters = [...Array(3)].map(() => (Math.random() * 183) | 0);
    axios
      .get(`${url}/${characters}`)
      .then((res) => {
        setResult(res.data);
        seterror("");
      })
      .catch((err) => {
        seterror(err.message);
      })
      .finally(() => {
        setloading(false);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <>
      <button onClick={() => fetchData()}>refresh</button>
      {error ? (
        <p>{error}</p>
      ) : loading ? (
        <p>"loading..."</p>
      ) : (
        <table>
          <tbody>
            {result.map((item) => {
              return (
                <tr key={item.id}>
                  <td>{item.name}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      )}
    </>
  );
};

export default NameList;