React中如何通过Context API实现子组件向父组件更新数据

核心问题 #

你当前的写法无法修改值的核心原因是：App组件中定义的msg是普通字符串常量，不具备响应式更新能力，同时也没有将修改值的方法通过Context传递给子组件，因此Posts组件没有能力修改上层的msg值。

修改后的代码 #

App.js #

import React, { createContext, useState } from 'react'
import Posts from './components/Posts'

const val = createContext()

const App = () => {
  // 将普通常量替换为useState响应式状态，同时得到修改状态的方法setMsg
  const [msg, setMsg] = useState('hi')

  return (
    <div>
      {/* 把状态值和修改方法一起作为Context的value传递 */}
      <val.Provider value={{msg, setMsg}}>
        <Posts />
      </val.Provider>
    </div>
  )
}

export default App
export { val }

Posts.js #

import React from 'react'
import { val } from '../App'
import { useContext } from 'react'

const Posts = () => {
  // 从Context中解构出状态值和修改方法
  const { msg: greet, setMsg } = useContext(val)
  return (
    <div>
      <div>{greet}</div>
      {/* 绑定点击事件触发状态修改 */}
      <button onClick={() => setMsg('hello')}>修改为hello</button>
    </div>
  )
}

export default Posts

完整数据更新流程 #

• 在Posts组件触发修改操作（比如点击上方的修改按钮），调用从Context中获取的setMsg方法，传入新值'hello'
• App组件中绑定的msg状态被setMsg触发更新，React标记App组件需要重新渲染
• App组件重渲染时，val.Provider的value属性会传入更新后的msg和setMsg对象
• 所有消费了val这个Context的后代组件，都会被React检测到Context值发生变化，触发重渲染
• Posts组件重渲染时，调用useContext(val)拿到最新的msg值，页面显示内容就会从hi更新为hello

内容的提问来源于stack exchange，提问作者fiza