Question

我只是想学习使用redux，我有一个非常简单的计数器列表组件，其中包含子计数器组件列表。

我在计数器上执行了onIncrement操作，我想在单击时增加计数。

当我单击增量时，它将更新父状态，但是子计数器不会更新。如果我浏览然后返回列表，它确实可以正确呈现，这在我看来意味着状态已经更新。

这是我的代码：

计数器组件

import React, { Component } from "react";
import { connect } from 'react-redux';
import { incrementCounter } from '../../actions/counterActions';
import PropTypes from 'prop-types';

class Counter extends Component {
    render() {
        return <div className="m-2">
            <b>{this.props.counter.count}</b>
            <button className="btn btn btn-secondary btn-sm m-2" onClick={() => { this.onIncrement(this.props.counter) }}>Increment</button>
        </div>;
    }

    onIncrement(counter) {
        this.props.incrementCounter(counter);
    }
}

const mapStateToProps = state => ({
})

Counter.propTypes = {
    incrementCounter: PropTypes.func.isRequired,
}

export default connect(mapStateToProps, { incrementCounter })(Counter);

计数器列表组件

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { CounterContext } from "../../contexts/context.js";
import Counter from "./Counter";
import { NewItem } from "./NewItem";
import ItemContainer from "../layout/ItemContainer";

import { connect } from 'react-redux';
import { getCounters } from '../../actions/counterActions';
import PropTypes from 'prop-types';

class CounterList extends Component {
    componentWillMount() {
        if (this.props.counters.length == 0) {
            this.props.getCounters();
        }
    }

    render() {
        const counterItems = this.props.counters.map(counter => <Counter key={counter.id} counter={counter} />);
        return <div>{ counterItems }</div>;
    }
}

const mapStateToProps = state => ({
    counters: state.counters.items
})

CounterList.propTypes = {
    getCounters: PropTypes.func.isRequired,
    counters: PropTypes.array.isRequired
}

export default connect(mapStateToProps, { getCounters })(CounterList);

反击动作

import { GET_COUNTERS, INCREMENT_COUNTERS } from '../actions/types';

export const getCounters = () => dispatch => {
    const counters = [{ id: 1, count: 4 }, { id: 2, count: 3 }, { id: 3, count: 0 }];
    // this could be API call to get initial counters
    console.log('In GetCounters', GET_COUNTERS);

    return dispatch({
        type: GET_COUNTERS,
        payload: counters
    })
}

export const incrementCounter = (counter) => dispatch => {
    // this could be API call to get initial counters
    counter.count++;

    return dispatch({
        type: INCREMENT_COUNTERS,
        payload: counter
    })
}

减径器

import { GET_COUNTERS, INCREMENT_COUNTERS } from '../actions/types';

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    console.log(action.type);
    switch (action.type){
        case GET_COUNTERS:
            return {
                ...state,
                items: action.payload
            };
        case INCREMENT_COUNTERS:
            var counter = action.payload;

            const counters = [...state.items];
            const index = counters.findIndex(x => x.id == counter.id);
            counters[index] = counter;

            return {
                ...state,
                items: counters
            };
        default: 
            return state;
    }
}

Answer 1

我想问题可能是您正在将具有更新的count值的相同旧计数器对象分配给counters [index]，因此Counter组件看不到变化。这可能是因为shouldComponentUpdate进行了浅层检查，并且对计数器prop的对象引用保持不变，并且您的组件不会重新呈现。

如果您在状态中使用多维数组或嵌套对象，则应该使用深度克隆。

建议使用Immutable.js之类的库，以确保减速器保持纯净。

public static IEnumerable<T> WhereUniqueBy<T, TSelector>(this IEnumerable<T> items, Func<T, TSelector> func)
{
    return items.GroupBy(func).Where(x => x.Count() ==1).Select(x => x.First());
}

Answer 2

您没有将状态映射到道具，例如：

function mapStateToProps = state => {
  return { count: state.count }; 
}

这将在您的redux中映射反映计数器变化的状态到要显示当前计数的组件的props。希望这会有所帮助！

Answer 3

您可以尝试将componentWillReceiveProps放入Counter组件中，并在每次单击按钮时检查是否获得了新的counter道具。

React Redux-父状态发生变化，但子组件未重新呈现

3 个答案: