但是当我重新制作这部分时，我的列表消失了。

我试着写console.log("My data look like:", data);之后const data = await api('pathWithQueryParams', {。看看数据是否来了。但我什至没有My data look like:在浏览器控制台中看到文本。也就是说，在函数内部fetchData甚至console.log不起作用。

首先在我的问题中，我将编写我重新制作到Redux
的代码，并在 _______________________________ 之后编写我的应用程序的一小部分，它是在纯 React 上编写的（在重新制作到 redux 之前）并且运行良好。

在 REDUX 上写道：

主页.js：

const Home = () => {

  const listCategory = useSelector(state => state.filterListReducer.listCategory);
  const currentPage = useSelector(state => state.filterListReducer.currentPage);
  const quantityElementPage = useSelector(state => state.filterListReducer.quantityElementPage);
  const sortAscDesc = useSelector(state => state.filterListReducer.sortAscDesc);
  const searchInput = useSelector(state => state.filterListReducer.searchInput);

  useEffect(() => {
      fetchData(currentPage, quantityElementPage, sortAscDesc, searchInput); 
  }, [currentPage, quantityElementPage, sortAscDesc, searchInput]);
    
    async function fetchData(valuePage, valueElement, valueSort, valueFilter, dispatch ) {
      return async (dispatch) => {
        try {
          
          dispatch({ type: "LOAD_DATA_START" }); 
          
          const data = await api(`pathWithQueryParams`, {   // <-- api - it function which using fetch make request to server
            method: 'GET',
           });
             console.log("My data look like:", data);   // <-- check if the data came in response, but I don't see even text "My data look like:" in browser console
    
          dispatch({ type: "LOAD_DATA_END", payload: data }); 
        
      } catch (e) {
        console.error(e);
      }
     };
    }

return ( <div> <Table dataAttribute={listCategory} /> </div> ); };

___________________________________________________

写在纯 React 上（在 remake 到 redux 之前）：

const Home = () => {
    
  const [value, setValue] = useState({
    listCategory: [],
    currentPage: 1, 
    quantityElementPage: 3,
    buttonsPagination: 0,   
    buttonsQuantityElementPage: 3,
    sortAscDesc: "asc",
    searchInput: ""
});
       
  useEffect(() => {
          fetchData(value.currentPage, value.quantityElementPage, value.sortAscDesc, value.searchInput); 
  }, [value.currentPage, value.quantityElementPage, value.sortAscDesc, value.searchInput]);
    
    async function fetchData(valuePage, valueElement, valueSort, valueFilter ) {  
      try {
        const data = await api(`pathWithQueryParams`, {
          method: 'GET',
         });
          setValue(prev => ({
            ...prev,
            listCategory: data.data,
            currentPage: data.page,
            buttonsPagination: Math.ceil(data.total / data.perPage),
            quantityElementPage: data.perPage,
         }));
      } catch (e) {
        console.error(e);
      }
    }

2个回答

// Home.js fragment

useEffect(() => {
/* 
  fetchData(currentPage, quantityElementPage, sortAscDesc, searchInput); 

  invoke fetchData, but does not call returning function
  e.g. const actualFetching = fetchData(currentPage, quantityElementPage, sortAscDesc, searchInput);

and missing call actualFetching(dispatch);
*/
      fetchData(currentPage, quantityElementPage, sortAscDesc, searchInput)(dispatch); 


  }, [currentPage, quantityElementPage, sortAscDesc, searchInput]);

    async function fetchData(valuePage, valueElement, valueSort, valueFilter 
/*, dispatch - not necessary here */ ) {
/*
  returning function (dispatch) => {}
*/
      return async (dispatch) => {
        try {

          dispatch({ type: "LOAD_DATA_START" }); 

          const data = await api(`pathWithQueryParams`, {   // <-- api - it function which using fetch make request to server
            method: 'GET',
           });
             console.log("My data look like:", data);   // <-- check if the data came in response, but I don't see even text "My data look like:" in browser console

          dispatch({ type: "LOAD_DATA_END", payload: data }); 

      } catch (e) {
        console.error(e);
      }
     };
    }

async function fetchData(valuePage, valueElement, valueSort, valueFilter, dispatch ) {
  return async (dispatch) => {
    try {

      dispatch({ type: "LOAD_DATA_START" }); 

      const data = await api(`pathWithQueryParams`, {   // <-- api - it function which using fetch make request to server
        method: 'GET',
       });
         console.log("My data look like:", data);   // <-- check if the data came in response, but I don't see even text "My data look like:" in browser console

      dispatch({ type: "LOAD_DATA_END", payload: data }); 

  } catch (e) {
    console.error(e);
  }
 };
}

这个函数现在正在返回一个函数，我认为你正在尝试在这里创建一个钩子，所以这样做的方法可能是：

useEffect(() => {
  const fetch = fetchData();//this returns a function now
  fetch(currentPage, quantityElementPage, sortAscDesc, searchInput);
}, [currentPage, quantityElementPage, sortAscDesc, searchInput]);

function fetchData() {
  return async (valuePage, valueElement, valueSort, valueFilter, dispatch) => {
    try {
      dispatch({ type: "LOAD_DATA_START" });

      const data = await api(`pathWithQueryParams`, {
        // <-- api - it function which using fetch make request to server
        method: "GET"
      });
      console.log("My data look like:", data); // <-- check if the data came in response, but I don't see even text "My data look like:" in browser console

      dispatch({ type: "LOAD_DATA_END", payload: data });
    } catch (e) {
      console.error(e);
    }
  };
}

其它你可能感兴趣的问题

上一篇如何使用下一个身份验证通过自定义 Spring API 库和端点进行身份验证下一篇多个 Material-UI 工具提示，在列表内单独打开和关闭 onClick