Question

我正在使用useRef来保存单击子组件（TaskItem）时调用的函数的引用：

UserTask-> TaskList-> TaskItem

// UserTask.js

const [detailsVisible, setDetailsVisible] = useState(false)
const [selectedTask, setSelectedTask] = useState({})

const openTask = (id) =>{
    const task = props.tasks.find(task => task.id === id);
    setDetailsVisible(true);
    setSelectedTask(task);
}

const openTaskRef = useRef(openTask);
const openTaskHandler = useCallback(id =>{
    openTaskRef.current(id);
}, []);

return (
    <React.Fragment>
        <TaskList 
            tasks={props.tasks} 
            onClick={openTaskHandler}
        />

        <Modal visible={detailsVisible} onClose={()=> setDetailsVisible(false)}>
            <Comments items={selectedTask.comments || []} />
        </Modal>
    </React.Fragment>
)

从API获取任务后几秒钟，任务列表通过redux-> props到达：

// Still UserTask.js

useEffect(()=>{
    fetchTasks()
}, [fetchTasks])

const mapDispatchToProps = dispatch =>{
    return {
        fetchTasks: ()=> dispatch(fetchTasks())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(UserTasks)

现在，我的问题是，当第一次呈现组件（UserTask）时，将使用一个props.tasks为空的上下文创建“ openTaskRef”（因为尚未发出API请求）。我需要使用useRef / useCallback组合来避免在删除项目后更新props.tasks列表时重新呈现TaskItems（这种情况在上面的代码中没有描述）。

如何控制这种情况？如何更新对openTask的引用以包括最新任务列表？

谢谢。

Redux更新后如何更新useRef

0 个答案: