【发布时间】：2018-08-12 13:37:18
【问题描述】：
我在我的应用中使用 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: 'johndoe@gmail.com',
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;
我也只关注添加产品操作 请大家帮帮我
【问题讨论】：
-
避免像
this.data这样的实例变量，改用React状态。
标签： javascript reactjs