[英]How i can change UI on change redux-toolkit state?
I want to rerender my component when i'm dispatch from another component, how i can do it?当我从另一个组件调度时,我想重新渲染我的组件,我该怎么做?
Component that need for rerender:需要重新渲染的组件:
const MessageComponent = (): JSX.Element => {
const [messages, setMessages] = useState<IMessageComponentState>({
messages: []
})
const message = useSelector((state: RootState) => state.message.messages);
useEffect(() => {
setMessages({
messages: message
})
console.log(message)
}, message);
return (
<>
{messages.messages}
<MyMessageComponent message="some text"/>
<IncomeMessageComponent message="some text2"/>
</>
)
}
This will cause re-render.这将导致重新渲染。
If you need more to re-render, like the <MyMessageComponent />
or the `, they'd just need to have some form of conditional rendering attached to the message variable or use it.如果您需要重新渲染更多内容,例如
<MyMessageComponent />
或 `,他们只需要将某种形式的条件渲染附加到消息变量或使用它。
The primary value of post-react-hooks redux is the rendering, or rather, the lack thereof; post-react-hooks redux 的主要价值在于渲染,或者更确切地说,缺乏渲染; it only re-renders what it absolutely has to, ie, components that require the change directly.
它只重新渲染它绝对需要的东西,即直接需要更改的组件。
Dependency
in useEffect
have to put inside [ ]
. useEffect
中的Dependency
项必须放在[ ]
中。 See more: Conditionally firing an effect .查看更多: 有条件地触发效果。
And messages state is an array but you set a object, change from setMessages({ messages: message })
to setMessages((mes) => [...mes, {messages: message}])
并且消息状态是一个数组,但是您设置了一个对象,从
setMessages({ messages: message })
更改为setMessages((mes) => [...mes, {messages: message}])
const MessageComponent = (): JSX.Element => {
const [messages, setMessages] = useState<IMessageComponentState>({
messages: []
})
const message = useSelector((state: RootState) => state.message.messages);
useEffect(() => {
setMessages((mes) => [...mes, {
messages: message
}])
console.log(message)
}, [message]); //<=== Put message in []
return (
<>
{messages.messages}
<MyMessageComponent message="some text"/>
<IncomeMessageComponent message="some text2"/>
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.