React.js, как изменить одно свойство объекта внутри карты, сохранив при этом другое свойство?

avatar
yxtao
1 июля 2021 в 20:37
885
2
0

У меня есть массив объектов. Каждый объект имеет два свойства: value, faceup. Массив используется как состояние. Я хочу изменить свойство лицевой стороны, не влияя на свойство значения. Но код, который я написал (handleclick), также перезаписывает свойство value объекта карты. Как предотвратить это?

const Board = (props) =>{
 const [cards, setCards]= useState(createCards(props.cardnums));
 const handleclick = ()=>{
   setCards((preCards)=>preCards.map((card)=> ( card.value===1? card.faceup=true : card.faceup=false) ))
 }
function createCards(nums){ 
     var cardlist=[];
     for (var i=0; i<nums.length; i++) {
          var card = {value:nums[i], faceup:false };
          cardlist.push(card)
     }
     return cardlist
   }

 return(
   <div>   board {JSON.stringify(cards)} 
   <button onClick = {handleclick}>test</button>
   <div className= "gridContainer">
      {cards.map((card)=> (<div className="gridItem"> {card.value}</div>) )}
   </div>
   </div>
 )
}
Источник

Ответы (2)

avatar
gerrod
1 июля 2021 в 21:36
2

Вы можете использовать синтаксис распространения объекта (три точки - ...), чтобы сделать это за вас:

const handleclick = () => setCards(preCards => preCards.map(
    card => ({
        ...card,
        faceup: card.value === 1
    });
));

Это в основном говорит: "скопируйте все предыдущие значения из card, затем перезапишите значение faceup.

avatar
Rishabh Gupta
1 июля 2021 в 21:44
0

В функции обратного вызова внутри функции map вы не возвращаете объект карты, вместо этого вы возвращаете возвращаемое значение выражения card.faceup=true или card.faceup=true

вы можете изменить свою функцию handleclick, чтобы исправить это

  const handleclick = () => {
    setCards((preCards) =>
      preCards.map((card) => {
        return {
          ...card,
          faceup: card.value === 1
        };
      })
    );
  };

Вот коды для него: https://codesandbox.io/s/epic-wing-y9ru7