React Hook useReducer 总是运行两次

Question

我在安装组件后从 public API 加载数据。加载数据后，我将其传递给减速器，但它总是触发两次。这是我的：

function MyComponent(props) {
   function reducer(data, action) {
      switch (action.type) {
         case 'INITIALIZE':
            return action.payload;
         case 'ADD_NEW':
            const newData = {...data};
            newData.info.push({});
            return newData;
      }
   }

   const [data, dispatch] = React.useReducer(reducer, null);

   useEffect(() => {
      fetch(URL)
        .then(response => {
            dispatch({
               type: 'INITIALIZE',
               payload: response
            });
         })
        .catch(error => {
            console.log(error);
         });
   }, []);

   const addNew = () => {
      dispatch({ type: 'ADD_NEW' });
   }

   return(
       <>data ? data.info.length : 'No Data Yet'</>
   );

}

如您所见，组件等待数据填充 reducer，当 INITIALIZE 也被调用两次时，但我并不关心它，直到我需要调用 ADD_NEW，因为在这种情况下，它会将两个空白对象添加到数组中，而不是只添加一个。我没有进入副作用的文档，但我无法解决它。

处理这个问题的最佳方法是什么？

Answer 1

下面是我将如何处理这个问题。之所以重新运行 action effect 的主要原因是因为你在组件的函数中有reducer。我还继续解决了其他几个问题。

由于 fetch 的工作方式，fetch 代码有一点偏差。您必须从响应中获取数据类型，这会给出另一个承诺而不是直接提供数据。

您还需要让渲染使用 {} 来表明您使用的是 javascript 而不是文本。

import React, { useReducer, useState, useEffect } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
const url = `https://picsum.photos/v2/list?page=3&limit=1`;
function App(props) {
  const [data, dispatch] = React.useReducer(reducer, null);

  useEffect(() => {
    fetch(url)
      .then(async response => {
        dispatch({
          type: "INITIALIZE",
          payload: (await response.json())
        });
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const addNew = () => {
    dispatch({ type: "ADD_NEW" });
  };
  console.log("here");
  return (
    <>
      <div>{data ? JSON.stringify(data) : "No Data Yet"}</div>
      <button onClick={addNew}>Test</button>
    </>
  );
}

render(<App />, document.getElementById("root"));
function reducer(data, action) {
  switch (action.type) {
    case "INITIALIZE":
      console.log(action.payload, "Initialize");
      return action.payload;
    case "ADD_NEW":
      const newData = { ...data };
      newData.info = newData.info || [];
      newData.info.push({});
      console.log(newData);
      return newData;
  }
}

React Hook useReducer 总是运行两次

React Hook useReducer always running twice

reactjs

react-hooks

use-reducer

React Hook useReducer 总是 运行 两次

React Hook useReducer always running twice

reactjs

react-hooks

use-reducer

React Hook useReducer 总是运行两次