1

後でuseReducerで使用できるように、initialState内でaxiosによってフェッチされたデータを使用しようとしています。しかし、2 番目の引数の initialState として渡すとすぐに、オブジェクトのない空の配列が返されます。助けてください... ：（

 const [prods, setProds] = useState([]);
  const getProds = () => {
    axios.get(`API`).then((res) => {
      const data = res.data;
      setProds(data.products);
    });
  };


  const result = prods.map(function (el) {
    const quantity = Object.assign({}, el);
    quantity.count = 0;
    return quantity;
  });
  
  const initialState = {
    products: [result],
  };
  useEffect(() => {
    getProds();
  }, []);

console.log(initialState);

  const [countState, dispatch] = useReducer(counterReducer, initialState);

  console.log(countState);

1 番目と 2 番目のログの結果は次のようになります。

useReducer は initialState を空にします

それぞれにカウントを追加した後の API 呼び出しの結果は、次のようになります。

ここに画像の説明を入力

これが私のレデューサーのコードです。何度もチェックしましたが、問題ないようです：

export const counterReducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return {
        ...state,
        products: state.products.map((product) =>
          product.id === action.id
            ? { ...product, count: product.count + 1 }
            : product
        ),
      };

    case "decrement":
      return {
        ...state,
        products: state.products.map((product) =>
          product.id === action.id
            ? {
                ...product,
                count: product.count !== 1 ? product.count - 1 : 1,
              }
            : product
        ),
      };
    default:
      return state;
  }
};
4

1 に答える 1

4

useReducerinitialState最初のレンダリング (axios が終了する前) でのみ消費し、その後のすべての再レンダリングでは、メモリ セルから状態を返すだけです。あなたがしたいことはuseReducer、トップに電話することです

const [countState, dispatch] = useReducer(counterReducer, {products: []});

そしてdispatchあなたのgetProds

const getProds = () => {
    axios.get(`API`).then((res) => {
      const data = res.data;
      setProds(data.products);
      dispatch({ type: "PRODUCTS_FETCHED", payload: data.products});
    });
  };

また、レデューサーにケースを追加して状態を設定します。

export const counterReducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return {
        ...state,
        products: state.products.map((product) =>
          product.id === action.id
            ? { ...product, count: product.count + 1 }
            : product
        ),
      };

    case "decrement":
      return {
        ...state,
        products: state.products.map((product) =>
          product.id === action.id
            ? {
                ...product,
                count: product.count !== 1 ? product.count - 1 : 1,
              }
            : product
        ),
      };
    case "PRODUCTS_FETCHED":
      return {
        ...state,
        products: action.payload
      };
    default:
      return state;
  }
};
于 2020-09-25T12:18:58.600 に答える