问题描述: 在使用React的useContext Hook时,发现组件不会根据上下文的变化进行更新。
解决方法:
// 上下文提供者组件
import React, { createContext, useState } from 'react';
export const MyContext = createContext();
export const MyProvider = ({ children }) => {
const [value, setValue] = useState('initial value');
console.log('context value:', value); // 确认上下文值
return (
{children}
);
};
// 消费者组件
import React, { useContext } from 'react';
import { MyContext } from './MyContext';
const MyComponent = () => {
const { value, setValue } = useContext(MyContext);
console.log('component value:', value); // 确认组件接收的上下文值
return (
Context value: {value}
);
};
export default MyComponent;
确保上述步骤正确无误后,组件应该能够根据上下文的变化进行更新。如果问题仍然存在,可以考虑使用React DevTools来检查组件的上下文树和状态的变化,以确定问题的根本原因。