Question

我的 reducer 将一个新的锻炼对象添加到一个名为锻炼的数组中。它在第一次初始更改时运行良好。问题是当我尝试添加另一个锻炼时，我的减速器会覆盖我刚刚添加的前一个锻炼。

我很确定这与我的减速器以及我如何操作锻炼数组有关。

添加新锻炼的表单：

import React from 'react';
import { Field, reduxForm } from 'redux-form';

let Form = props => {
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit}>
            <label>Name</label>
            <Field name='name' component='input' type='text' />
            <label>Total Calories</label>
            <Field name='calories' component='input' type='number' />
            <label>Duration</label>
            <Field name='duration' component='input' type='number' />
            <button type='submit'>Submit</button>
        </form>
    );
};

export default reduxForm({ form: 'workout' })(Form);

actions.js（我的操作）：

export const addWorkout = workout => ({
    type: 'ADD_WORKOUT',
    payload: {
        workout,
    },
});

workouts.js（减速器）：

const initialState = {
    workouts: [
        {
            name: 'HIIT',
            calories: '320',
            duration: '30',
        },
        {
            name: 'Run',
            calories: '35',
            duration: '400',
        },
    ],
    totalCal: 0,
};

export default function workoutReducer(state = initialState, action) {
    switch (action.type) {
        case 'ADD_WORKOUT': {
            console.log(state.workouts);
            return {
                ...state,
                workouts: [...state.workouts, action.payload.workout],
            };
        }
        default:
            return state;
    }
}

截图：

Before adding any workouts, initial state contains two workouts, HIIT and Run

After adding a workout, in this case I added a Yoga workout

Adding a second workout

正如你所看到的，我添加的第一个锻炼被覆盖了。

非常感谢任何帮助，提前致谢！

编辑

这是我的显示锻炼列表的组件。

import React, { useEffect } from 'react';
import './Dashboard.scss';
import { connect } from 'react-redux';

import Chart from './Chart';
import Plan from './Plan';

const Dashboard = props => {
    return (
        <div className='dashboard-container'>
            <div className='daily'>
                <h4>Keep it going Steven you got this!</h4>
                <div className='stats'>
                    <p className='calories'>Calories</p>
                    <p className='stand'>Stand Hours </p>
                    <p className='exercise'>Exercise Minutes</p>
                </div>
                <p>Workouts</p>
                {props.workouts.map((workout, i) => {
                    return (
                        <div>
                            <p key={i}>{workout.name}</p>
                        </div>
                    );
                })}
            </div>
            <div className='workouts'>
                <Chart />
                <Plan />
            </div>
        </div>
    );
};

const mapStateToProps = state => ({
    workouts: state.workouts.workouts,
    totalCals: state.workouts.totalCal,
});

export default connect(mapStateToProps)(Dashboard);

Answer 1

问题是关于我在导航栏中的添加锻炼链接。我没有使用 react-router-dom 中的 Link，而是使用 bootstrap 中的 Nav.Link 标签，每次导航到表单时都会重置我的状态。

import { Link } from 'react-router-dom';
...
<Nav className='mr-auto'>
    ...
    {/* <Nav.Link href='/addworkout'>Add Workout</Nav.Link>  */}
    <Link to='/addworkout'>Add Workout</Link>
</Nav>

在 React Redux 中为 State 添加新值会覆盖之前的状态

1 个答案: