React - 通過道具在孩子中設置狀態

Question

我對 React 比較陌生，我正在嘗試在 onclick 事件的子組件（ SportTile ）內設置 object 的state 。 我很樂意通過使用單獨的useState()掛鈎來更新單個變量的 state，但是，當您有很多變量時，這是一項繁瑣的任務。 所以我使用了一個名為： isClicked的 object，它存儲了各種運動的 boolean 值，以確定它們是否被用戶選擇。

我正在尋找的功能是，每當單擊SportTile時，它的isClicked["sportname"]值設置為 true，並且 rest 設置為 false。 一次只有一項運動是真實的。 在控制台在onclick() function 中記錄isClicked object 后，我得到了所需的值，但它們沒有在父組件的 ( Booking ) h1標記中更新

 import React from 'react'; import SportTile from '../SportTile'; import './booking.css'; import { useState } from 'react'; import SportsSoccerRoundedIcon from '@mui/icons-material/SportsSoccerRounded'; import SportsBasketballRoundedIcon from '@mui/icons-material/SportsBasketballRounded'; import SportsVolleyballIcon from '@mui/icons-material/SportsVolleyball'; import SportsTennisIcon from '@mui/icons-material/SportsTennis'; const Booking = () => { const [isClicked, setIsClicked] = useState({ Football: false, Basketball: false, Volleyball: false, Tennis: false, }); return ( <div className='booking'> <div className='booking__body'> <div className='booking__left'> <h1>SELECT SPORT</h1> <SportTile sportname={'Football'} icon={<SportsSoccerRoundedIcon />} clicked={setIsClicked} isClicked={isClicked} // test={setTestclicked} // istestClicked={istestClicked} /> <SportTile sportname={'Basketball'} icon={<SportsBasketballRoundedIcon />} clicked={setIsClicked} isClicked={isClicked} /> <SportTile sportname={'Volleyball'} icon={<SportsVolleyballIcon />} clicked={setIsClicked} isClicked={isClicked} /> <SportTile sportname={'Tennis'} icon={<SportsTennisIcon />} clicked={setIsClicked} isClicked={isClicked} /> <h1>Football: {isClicked.Football.toString()} </h1> <h1>Basketball: {isClicked.Basketball.toString()} </h1> <h1>Volleyball: {isClicked.Volleyball.toString()} </h1> <h1>Tennis: {isClicked.Tennis.toString()} </h1> </div> <div className='booking__right'>Right Side</div> </div> </div> ); }; export default Booking;

 import { Button } from '@mui/material'; import React from 'react'; import './sportTile.css'; const SportTile = ({ sportname, icon, clicked, isClicked, }) => { function onclick() { Object.keys(isClicked).map((key) => { if (key == sportname) { isClicked[key] = true; } else { isClicked[key] = false; } }); clicked(isClicked); console.log(isClicked); } return ( <Button className='sportname__button' onClick={onclick}> <div className='sportname__buttonColumn'> {icon} {sportname} </div> </Button> ); }; export default SportTile;

也許我錯過了顯而易見的事情，但會感謝任何能指出我正確方向的人

Answer 1

你永遠不應該傳遞原始的 setState 方法。 在 Booking 組件中創建一個新方法：

const setIsClickedWrapper = (sportKey) = {
   setIsClicked((isClicked) => Object.keys(isClicked).map((key) => sportKey === key)
} 

在 SportTile 組件中調用：

const onclick = () => { setIsClickedWrapper(sportname) }     

但我認為如果 isClicked 只是當前單擊的運動鍵的字符串會更好，然后就足夠了：

const setIsClickedWrapper = (sportKey) = {
   setIsClicked(sportKey)
}