[英]How to update a component after updating props react
how to update a component after updating props?更新道具后如何更新组件? I have the following component structure:
我有以下组件结构:
MyList.js
render() {
return(
<ComponentList products={props.products}>
<ComponentBoard product={props.product[i]} //send choosen product(1) from list(100 products)
)
}
and next components have 2 similar component contentRow并且下一个组件有 2 个相似的组件 contentRow
ComponentList.js (
same(
<contentRow > list .map() //100 contentRow
)
ComponentBoard.js
same(
<contentRow > // 1 contentRow
)
in the component componentRow there are fields that display and through redux change the data in the store, for example, the username.在组件 componentRow 中有显示的字段,并通过 redux 更改存储中的数据,例如用户名。
And when I open the ComponentBoard component and change the value in the ComponentRov field, the value in the ComponentList> componentRow should also change.当我打开 ComponentBoard 组件并更改 ComponentRov 字段中的值时,ComponentList> componentRow 中的值也应该更改。
For a better understanding:为了更好地理解:
ComponentList is a table of ComponentsRow, when clicked to row, That opens the ComponentBoard window, in which there is also a componentRow. ComponentList 是一个ComponentRow 的表格,当点击到行时,打开ComponentBoard window,其中还有一个componentRow。
Question: how to update the data that is displayed in componentList from componentBoard?问题:如何从componentBoard更新componentList中显示的数据? they have similar props from 1 store
他们有来自 1 家商店的类似道具
When serializing props
as initial state you should listen for changes in props
and update the state
accordingly.当将
props
序列化为初始 state 时,您应该监听props
的变化并相应地更新state
。 In class based components you use componentDidUpdate
in functional components you can achieve the same result with an useEffect
listening for changes in a given prop
在基于 class 的组件中,您在功能组件中使用
componentDidUpdate
您可以通过useEffect
监听给定prop
的变化来实现相同的结果
const Component = ({ foo }) =>{
const [state, setState] = useState(foo) //initial state
useEffect(() =>{
setState(foo) //everytime foo changes update the state
},[foo])
}
The class
equivalent class
等效
class Component extends React.Component{
state = { foo : this.props.foo } // initial state
componentDidUpdate(prevProps){
if(prevProps.foo !== this.props.foo)
this.setState({ foo : this.props.foo }) //everytime foo changes update the state
}
}
for a better understanding of React, I recommend you read React Life Cycle为了更好地理解 React,我建议你阅读React Life Cycle
the general idea is to make your list into the state of the MyList.js, that way, u can update it through a function in Mylist.js and pass it as a prop to the ComponentBoard.一般的想法是将您的列表放入 MyList.js 的 state 中,这样,您可以通过 Mylist.js 中的 function 对其进行更新,并将其作为道具传递给 ComponentBoard。 Now you can change the state of MyList and when that changes, so does ComponentList.
现在您可以更改 MyList 的 state 并且当更改时,ComponentList 也会更改。
class MyList extends Component {
constructor(){
super();
this.state = {
// an array of objects
}}
handleBoardChange = () => { some function using this.setState }
// the rest of your Mylist class
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.