Question

我对反应还很陌生，我正在制作一个简单的费用申请。我面临的问题是我从我的根组件分派了一个动作，当我 console.log 商店费用时，我在商店里得到一件物品。但是当我尝试从我的子组件中获取商店以呈现已经分派到商店的费用时，我得到了两个项目。我试图调试问题，但我不明白这种行为的原因以及随后的调度操作，所有项目都显示了两次。这是调度代码

import configureStore from "./store/configureStore";
import { addExpense } from "./actions/expenses";
import getVisibleExpenses from "./selectors/expense";

function App() {
  const store = configureStore;

  store.dispatch(
    addExpense({
      description: "water bill",
      createdAt: 5000,
      amount: 300,
    })
  );
  store.dispatch(
    addExpense({ description: "food bill", amount: 2000, createdAt: 1000 })
  );
  const state = store.getState();
  const visibleExpense = getVisibleExpenses(state.expenses, state.filters);
  console.log(visibleExpense);

这是费用.js文件，其中费用为一次呈现两次

import React from "react";
import { connect } from "react-redux";
import ExpenseListItem from "./ExpenseListItem";
import getVisibleExpenses from "../selectors/expense";


function ExpenseList({ expenses }) {
  console.log(expenses);
   
  return (
    <div>
      <h1>Expense List</h1>
      {expenses.map((expense) => [
        <ExpenseListItem
          key={expense.id}
        {...expense}
        />,
      ])}
    </div>
  );
}
const mapStateToProps = (state) => {
  return {
    expenses: getVisibleExpenses(state.expenses, state.filters)
   
  };
};
export default connect(mapStateToProps)(ExpenseList);

如果您需要任何其他信息来回答问题，请在评论中告诉我。谢谢

Answer 1

您在渲染过程中分派动作。那是一种“副作用”，你不应该在渲染 React 组件时产生副作用。

您在这里看到的是，React 会在开发过程中在 <StrictMode> 标签内对组件进行双重渲染，特别是以帮助您捕获此类错误，因为结果会很明显.

您应该将所有 Redux 存储交互移到此组件之外。

分派一个动作一次，它被渲染两次而不是被渲染一次

1 个答案: