我以为 React 只是在重新加载我需要的东西 - 在我的情况下,它看起来不同,或者我做错了什么。我有员工表。对于一天内的每个员工,我可以设置工作时间的开始和结束时间。喜欢这个:const ScheduleRow = React.memo((props) => { return ( <tr> // number of row - doesn't matter <th className="text-center">{ props.no }</th> { ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04" /* etc */ ].map( date => { return ( <ScheduleCell date={ date } employee_id={ props.employee_id }/> )}) } </tr> )})const ScheduleCell = React.memo((props) => { const dispatch = useDispatch() let schedule_id = `${props.employee_id}:${props.date}` const schedule = useSelector(state => state.schedules)[schedule_id] || null /* some code here - not changing state */ console.log(props.date) return ( <td> <Form.Control type="text" value={schedule?.begin} onChange={(e) => dispatch({ type: "EDIT_SCHEDULE", schedule_id: schedule_id, property: "begin", value: e.target.value })}/> <Form.Control type="text" value={schedule?.cease} onChange={(e) => dispatch({ type: "EDIT_SCHEDULE", schedule_id: schedule_id, property: "cease", value: e.target.value })}/> </td> )});你可以看到我在 ScheduleCell 中有 console.log() 在返回正在编辑的打印日期之前。我相信,当我更改单元格(例如日期“2020-01-02”)时,我应该在控制台中只看到“2020-01-02”。但是我在 ScheduleRow 中看到数组中的每个日期,这意味着 React 修改了每个单元格,即使我只更改了一个单元格。我的推理有什么问题,如何改进它以仅重新加载编辑单元格?
1 回答
慕村225694
TA贡献1880条经验 获得超4个赞
确保为元素添加适当的道具。没有这个,React 就不会关联相同的组件实例在重新渲染时应该被重用。对于渲染的任何内容也是如此。key<ScheduleCell/><ScheduleRow/>
const ScheduleRow = React.memo((props) => {
return (
<tr>
<th className="text-center">{ props.no }</th> // number of row - doesn't matter
{ ["2020-01-01", "2020-01-02", "2020-01-03", "2020-01-04" /* etc */ ].map(date => { return (
<ScheduleCell key={ date } date={ date } employee_id={ props.employee_id }/>
)}) }
</tr>
)
})
React.memo仅当 props 与上次呈现该实例时相同时,才会在组件实例的上下文中记住输出。有关其工作原理的更多信息,请阅读 React 的和解。
添加回答
举报
0/150
提交
取消