如何从组件B（功能组件）中的事件处理程序渲染组件A？

Question

我正在通过一个简单的食物记录应用程序了解钩子。我有一个带有按钮列表的页面（每个按钮都是食物）。当用户单击按钮时，该食物将显示在页面顶部，其中包含所消耗的卡路里。我使用两个功能组件：Ate和Food，并将食物列表和食物列表都保存在localStorage的数组中。它可以工作，但是需要刷新页面。如何使用挂钩从Food组件中的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>
  )
}

here是其余的代码。

谢谢！