更新对React上下文状态的更新

Question

我正在通过儿童组件中的回调更新上下文中的共享状态，但这不会导致重新渲染，这导致儿童组件的上下文具有初始值，直到下一个重新渲染。

是否有一种方法可以迫使儿童更新和一旦状态在上下文提供商中更新一旦状态进行更新？

我的上下文提供商：

const UserLocationContext = React.createContext()

export const useUserLocation = () => {
    return useContext(UserLocationContext)
}

export const UserLocationProvider = ({ children }) => {
    const [ipUserLocation, setIpUserLocation] = useState(null)

    const updateIpUserLocation = (ipUserLocation) => {
        setIpUserLocation(ipUserLocation)
        console.log(ipUserLocation) //value is updated here immediately after the updateIpUserLocation call
    }
    return (
        <UserLocationContext.Provider value = {{ipUserLocation, updateIpUserLocation}}>
            {children}
        </UserLocationContext.Provider>
    )

}

export default UserLocationProvider

孩子：

const LocationHandler = () => {
    const {ipUserLocation, updateIpUserLocation} = useUserLocation()
    
    useEffect(() => {
    const ip_url = `https://api.freegeoip.app/json/`
    const fetchIPLocation = async () => { 
        
        const result = await fetch(ip_url);
        const json = await result.json();
        updateIpUserLocation([json.latitude, json.longitude])
        console.log(ipUserLocation) //value here remains null until next re-render
    }
    fetchIPLocation()

    }, []);}

Answer 1

问题是usestate是异步的，因此ipuserlocation值在setipuserlocation被调用之后不会立即更新。

对于修复程序，您可以添加ipuserlocation作为useffect的依赖性，该将帮助您收听ipuserlocation on location> location> location> location> location>。

const LocationHandler = () => {
    const {ipUserLocation, updateIpUserLocation} = useUserLocation()
    
    useEffect(() => {
    const ip_url = `https://api.freegeoip.app/json/`
    const fetchIPLocation = async () => { 
        
        const result = await fetch(ip_url);
        const json = await result.json();
        updateIpUserLocation([json.latitude, json.longitude])
    }
    fetchIPLocation()

    }, []);}

    //add another `useEffect` with `ipUserLocation` in dependencies
    useEffect(() => {
       //TODO: You can do something with updated `ipUserLocation` here
       console.log(ipUserLocation)
    }, [ipUserLocation])

    return ...
}

Answer 2

实际上，当您更新上下文状态时，子组件会重新渲染。之所以发生这种情况，是因为您使用 usecontext 挂钩来聆听对上下文所做的任何更改。您可以采取的措施实际向自己证明孩子被重新渲染的是在孩子的组件中添加此内容：

useEffect(() => {
 console.log(ipUserLocation);
}, [ipUserLocation])

使用此使用效果 console.log 每次重新渲染孩子时都会运行，并且< strong> ipuserlocation 已经改变。

文档：