[英]react memo is not getting props
React memo 没有捕获 props, prevProps
和nextProps
和组件都渲染得很好。 反应文档说
我的问题是使用反应备忘录停止两次渲染,但备忘录似乎不起作用,并且组件使用相同的道具渲染两次。
在/events
上单击Create New Event
时呈现组件
位于/components/Event/CreateEvent/CreateEvent.js
的子组件
父组件位于/Pages/Event/Event.js
行号999
' 从那里触发子组件
这是代码:
import React from "react";
import AuthContext from "../../context/global-context";
import CreateEvent from "../../components/Event/CreateEvent/CreateEvent";
function Events({ location }) {
// Sate Managing
const [allEvents, setAllEvents] = React.useState([]);
const [creating, setCreating] = React.useState(false);
// Context As State
const { token, email } = React.useContext(AuthContext);
// Creating Event Showing
const modelBoxHandler = () => {
// works on when the ViewEvent is open
if (eventSelected) {
setEventSelected(null);
return;
}
setCreating(!creating);
};
return (
<div className="events">
{/* New Event Creating */}
{creating && (
<CreateEvent onHidder={modelBoxHandler} allEvents={allEvents} />
)}
{console.log("Event Rendered.js =>")}
</div>
);
}
export default React.memo(Events, () => true);
矩形备忘录没有道具的子组件:
import React from "react";
import AuthContext from "../../../context/global-context";
function CreateEvent({ onHidder, allEvents }) {
// Context
const { token } = React.useContext(AuthContext);
console.log("CreatedEvent.js REnder");
return (
... Some code here
);
}
export default React.memo(CreateEvent, (prevProps, nextProps) => {
console.log("Hello", prevProps, nextProps);
});
提前感谢您的宝贵答案和时间!
在您的示例中,您没有额外的渲染让React.memo
工作。
根据您的渲染逻辑,没有任何nextProps
,您使用条件渲染( creating
)卸载组件。
// You toggle with `creating` value, there is only single render each time
creating && <CreateEvent onHidder={modelBoxHandler} allEvents={allEvents}/>
// Works, because there will be multiple renders (nextProps)
true && <CreateEvent onHidder={modelBoxHandler} allEvents={allEvents} />
在这种情况下,您可能不需要React.memo
。
问题是,在creating
变量的基础上,您实际上是在重新安装而不是渲染CreateEvent 组件。 这意味着如果创建变量更改,则在创建为真时卸载并重新安装组件,因此它不是重新渲染
您还必须注意, modelBoxHandler
function 参考也会在每次重新渲染时发生变化,因此即使您的 CreateEvent 组件在渲染 state 并且父级由于某种原因重新渲染,CreateEvent 组件也将重新渲染
您需要进行 2 项更改才能使其更好地工作
// Creating Event Showing
const modelBoxHandler = useCallback(() => {
// works on when the ViewEvent is open
if (eventSelected) {
setEventSelected(null);
return;
}
setCreating(prevCreating => !prevCreating);
}, [eventSelected]);
...
return (
<div className="events">
{/* New Event Creating */}
<CreateEvent creating={creating} onHidder={modelBoxHandler} allEvents={allEvents} />
{console.log("Event Rendered.js =>")}
</div>
);
并在 createEvent
function CreateEvent({ onHidder, allEvents, creating }) {
// Context
const { token } = React.useContext(AuthContext);
console.log("CreatedEvent.js REnder");
if(!creating) {
return null;
}
return (
... Some code here
);
}
export default React.memo(CreateEvent);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.