父组件重新呈现时，子组件不会重新呈现

Question

我在我的应用程序中使用redux进行状态管理。但是在我发出一个动作后，只有父组件更新，孩子们才会收到新的道具或更新。我正在使用react 16.2.0，Redux 3.7.2，react-redux 5.0.6。这些是我的组件：

父组件

class ConnectingItems extends React.Component{
    constructor(props){
        super(props);

        this.afterProds = this.afterProds.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
        this.data = this.props.data.products;
    }
    componentDidUpdate(){
        this.data = this.props.data.products;
    }
    afterProds(){
        this.data = this.props.data.products;
        this.forceUpdate();
    }
    handleSearch(data){
        this.data = data;
        this.forceUpdate();
    }
    render(){
        const products = this.props.data.products;
        const searched_products = this.data;
        console.log('rerendering in main')
        return(
            <div>
                <Navbar/>
                <div className="container">
                    <h5 className="center-align">
                        <Searchform data={products} new_data={this.handleSearch}/>
                    </h5>
                </div>
                <ProductsList user_data={searched_products}/>
                <Modal
                    header='Add Product'
                    modalOptions={{
                        opacity: .0
                    }}
                    trigger={
                        <div className='fixed-action-btn action-button'>
                            <a className="btn-floating btn-large yellow darken-1">
                                <i className="fa fa-plus"></i>
                            </a>
                        </div>
                    }>
                    <AddProducts afterProdAdd={this.afterProds}/>
                </Modal>
            </div>
        );
    }
}

子组件：

class ConnectingProductListing extends React.Component{
    constructor(props){
        super(props);

        this.handleDelete = this.handleDelete.bind(this);
        this.afterEdit = this.afterEdit.bind(this);
    }
    handleDelete(id){
        this.props.deleteProduct(id);
        console.log('delete dispatched');
        this.forceUpdate();
    }
    componentWillReceiveProps(newprops){
        console.log(newprops);
    }
    afterEdit(){
        this.forceUpdate();
    }
    render(){
        let data = this.props.user_data;
        console.log('im re rendering')
        console.log(data);
        return(
            <div className="container section">
                <div className="row">
                    <div className="col s12">
                        {data.length < 1 ? 
                            <div className="col s12 center-align">
                                <p>
                                    <b>No Product here.</b>
                                </p>
                            </div>:
                            data.map(product => {
                                const name = product.name;
                                const quantity = product.quantity;
                                const price = product.price;

                                return(
                                    <div key={product.id} className="card center grey lighten-5 z-depth-1">
                                        <div className='card-content left-align'>
                                            <span className='card-title'>
                                                {name}
                                            </span>
                                            <span>
                                                Price: ${price}<br/>
                                            </span><span>
                                                Quantity: {quantity}
                                            </span>
                                        </div>
                                        <div className='card-action center'>
                                            <div className='row'>
                                                <div className='col s12'>
                                                    <Modal
                                                      header='Edit Product'
                                                      modalOptions={{
                                                        opacity: 0.0
                                                      }}
                                                      trigger={
                                                        <button className='btn yellow accent-3 center'>Edit</button>
                                                      }
                                                      actions={
                                                          <div>
                                                              <Modal
                                                                header='Delete Product'
                                                                modalOptions={{
                                                                    opacity: 0.0
                                                                }}
                                                                trigger={
                                                                    <a className="modal-action modal-close waves-effect waves-yellow btn-flat">Delete</a>
                                                                }
                                                                actions={
                                                                    <div>
                                                                        <a className='modal-action modal-close waves-effect waves-yellow btn-flat'
                                                                            onClick={() => this.handleDelete(product.id)}>Yes</a>
                                                                        <a className='modal-action modal-close waves-effect waves-yellow btn-flat'>No</a>
                                                                    </div>
                                                                }>
                                                                    <p>Are you sure you want to delete this product? It can't be undone</p>
                                                              </Modal>
                                                              <a className="modal-action modal-close waves-effect waves-yellow btn-flat">Close</a>
                                                          </div>
                                                      }>
                                                        <EditProducts product={product} afterEdit={this.afterEdit}/>
                                                    </Modal>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }
}

我的减速机：

const rootReducer = (state = initialState, action) => {
    switch (action.type){
        case constants.ADD_PRODUCT:

            return {
                ...state,
                data: {
                    ...state.data,
                    products: [
                        ...state.data.products,
                        action.payload
                    ]
                }
            }
        default:
            return state;
    }
};

export default rootReducer;

初始状态：

initialState = {
        data: {
            id: 0,
            name: 'John Doe',
            email: '[email protected]',
            products: [
                {
                    id: 0,
                    name: 'product name',
                    price: 10,
                    quantity: 10,
                }
            ],

        }
    };

商店：

import { createStore } from "redux";
import rootReducer from "../reducer/index";

const store = createStore(
    rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

我也只关注添加产品动作请各位帮助我

Answer 1

更新：我看到你添加了一些代码，但你仍然缺少容器？你的动作（常量）定义代码？

如果您使用的是redux，那么您应该包含商店和容器的源代码。

最有可能的问题是https://web.archive.org/web/20180304224831/https://redux.js.org/troubleshooting#nothing-happens-when-i-dispatch-an-action的第一个问题：

Redux假设你永远不会改变它在reducer中给你的对象。每次都必须返回新的状态对象。

那里有各种各样的建议。如果您包含更多代码，我可能会提供更多帮助。