React Hook useReducer всегда запускается дважды

Question

Я загружаю данные из общедоступного 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'</>
   );

}

Как видите, компонент ожидает данных для заполнения редуктора, который, когда INITIALIZE также вызывается дважды, но меня это не волновало, пока мне не потребовалось позвонить ADD_NEW, потому что в этом случае он добавляет в массив два пустых объекта вместо одного. Я не входил в документацию по побочным эффектам, но не смог решить эту проблему.

Как лучше всего с этим справиться?

Answer 1

Вот как я бы справился с этой проблемой. Основная причина, по которой он повторно запускал эффект действия, заключалась в том, что у вас был редуктор в функции компонента. Я также пошел дальше и исправил несколько других проблем.

Код выборки был немного неправильным из-за того, как работает выборка. Вы должны получить тип данных из ответа, который дает другое обещание вместо данных напрямую.

Вам также нужно было использовать при рендеринге {}, чтобы указать, что вы используете 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;
  }
}