Reactjs 如何从组件B（功能组件）中的事件处理程序呈现组件A？

我正在通过一个简单的食物日志应用程序学习挂钩。我有一个带有按钮列表的页面（每个按钮都是一种食物）。当用户点击某个按钮时，该食物会显示在页面顶部，并显示所摄入的卡路里。我使用两个功能组件：Ate和Food，并将食物列表和Ate列表保存在localStorage中的数组中。它可以工作，但需要刷新页面。如何使用钩子从食物组件中的onClick事件处理程序呈现Ate组件

下面是一个代码示例：

const Home = props => {
  const ate = readAte()
  const foods = readFood()

  return (
    <div>
      <Ate ate={ate} />
      <Food food={foods} />
    </div>
  )
}

const getAte = (x, i) => {
  return <li key={i}>{x.name}</li>
}

const Ate = props => {
  const { ate } = props

  return (
    <div>
      <h2>I Ate</h2>
      {ate.map(getAte)}
    </div>
  )
}

const getFood = (food, i) => {
  return <FoodItem key={i} data={JSON.stringify(food)} name={food.name} />
}

const Food = props => {
  const { food } = props
  return (
    <div>
      <h2>Choose from the list</h2>
      <ul>{food.map(getFood)}</ul>
    </div>
  )
}

const handleFoodClick = event => {
  const ate = JSON.parse(event.target.getAttribute('data'))
  saveAte(ate)
}

const FoodItem = props => {
  const { name, data } = props
  return (
    <li>
      <button onClick={handleFoodClick} data={data}>
        {name}
      </button>
    </li>
  )
}

const Home=props=>{
const ate=readAte（）
const foods=readFood（）
返回(
是代码的其余部分

谢谢大家!