[英]Child component not re-rendering from state change from one parent, but re-renders from another parent?
[英]Child component not re-rendering when Parent component re-renders
我在我的應用程序中使用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;
我也只專注於添加產品操作,請大家幫我
更新:我看到您添加了一些代碼,但是您仍然缺少容器? 您的動作(常量)定義代碼是什么?
如果您使用的是redux,則應包含商店和容器的源代碼。
最可能的問題是https://web.archive.org/web/20180304224831/https://redux.js.org/troubleshooting#nothing-happens-when-i-dispatch-an-action中的第一個問題:
Redux假定您絕不會在化簡器中對它提供給您的對象進行突變。 每一次,您都必須返回新的狀態對象。
那里有各種各樣的建議。 如果您包含更多代碼,我也許可以提供更多幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.