向子组件传递state时变量未定义问题求助

核心问题：favourites未传递到UserProfile组件 #

你在Route标签上直接写了favourites={favourites}，但React Router的<Route>组件不会把自身的props传递给element属性里的组件。必须把favourites作为props直接传给<UserProfile>组件：

// 错误写法
<Route path='/profile' element={<UserProfile images={images} getItem={getItem}/>} favourites={favourites} />

// 正确写法
<Route path='/profile' element={<UserProfile images={images} getItem={getItem} favourites={favourites} />} />

其他需要修复的问题 #

1. getItem函数的状态更新逻辑错误 #

当前写法setFavourites([favourites, item])会把旧的favourites数组作为新数组的第一个元素，导致数组嵌套（比如变成[[初始对象], 新对象]），还可能因闭包问题导致状态更新不及时。改用函数式更新展开数组：

function getItem (item) {
  // 避免传入无效值
  if (!item) return;
  setFavourites(prevFavourites => [...prevFavourites, item])
}

2. 无效的useEffect调用 #

你在useEffect里调用getItem()但未传参数，会把undefined加入favourites数组，直接删除这段代码即可：

// 删掉这段无意义的代码
useEffect(() => {
  getItem()
}, [])

3. ImageGrid组件的样式问题 #

className="flex flex- justify-center "里的flex-是无效样式，改成flex即可：

<div className="flex justify-center ">

修正后的App.js核心代码 #

const [favourites, setFavourites] = useState([
  {
    type: 'peppermint Latte',
    cafe: 'Nomad',
    location: 'Barcelona',
    price: '$2',
    img: Coffee4,
    index: 4,
  }
]);

// Get items for favourites
function getItem (item) {
  if (!item) return;
  setFavourites(prev => [...prev, item])
}

return (
  <>
    <Router>
      <Routes>
        <Route path='/' element={<LoginPage/>} />
        <Route path='/profile' element={<UserProfile images={images} getItem={getItem} favourites={favourites} />} />
      </Routes>
    </Router>
  </>
);

修改后，UserProfile组件就能正常接收favourites变量，收藏功能的逻辑也会更稳定。

内容的提问来源于stack exchange，提问作者Gavin-walsh