我可以更改数组内对象属性的 state 吗？

Question

I want to change the matched property of objects inside an array but my function don't success to accomplish it this is the function please help me to fix the problem:

let state = [
  {id: 0, contents: 'Provider', visible: false, matched: false}, 
  {id: 1, contents: 'Provider', visible: false, matched: false}, 
  {id: 2, contents: 'selector', visible: false, matched: false}, 
  {id: 3, contents: 'selector', visible: false, matched: false}, 
  {id: 4, contents: 'useSelector()', visible: false, matched: false}, 
  {id: 5, contents: 'useSelector()', visible: false, matched: false}, 
  {id: 6, contents: 'useDispatch()', visible: false, matched: false}, 
  {id: 7, contents: 'useDispatch()', visible: false, matched: false}, 
  {id: 8, contents: 'Pure Function', visible: false, matched: false}, 
  {id: 9, contents: 'Pure Function', visible: false, matched: false}, 
  {id: 10, contents: 'react-redux', visible: false, matched: false}, 
  {id: 11, contents: 'react-redux', visible: false, matched: false}, 
]; 

const cardFlip = (id) => {
      let flipState = [...state];
      const cardID = id;
      flipState[cardID] = {...state[cardID], visible:true}
      
      const [index1, index2] = flipState.filter(card => card.visible).map(card => card.id);
      if (index2 !== undefined){
        const card1 = flipState[index1];
        const card2 = flipState[index2];
        if (card1.contents === card2.contents) {
          flipState[index1] = {...card1, matched: true}
          flipState[index2] = {...card2, matched: true}
        }
      } 

      return flipState                                                                                                     }

This is the result finally:

cardFlip(3)

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 0, contents: 'Provider', visible: false, matched: false}
1: {id: 1, contents: 'Provider', visible: false, matched: false}
2: {id: 2, contents: 'selector', visible: false, matched: false}
3: {id: 3, contents: 'selector', visible: true, matched: false}
4: {id: 4, contents: 'useSelector()', visible: false, matched: false}
5: {id: 5, contents: 'useSelector()', visible: false, matched: false}
6: {id: 6, contents: 'useDispatch()', visible: false, matched: false}
7: {id: 7, contents: 'useDispatch()', visible: false, matched: false}
8: {id: 8, contents: 'Pure Function', visible: false, matched: false}
9: {id: 9, contents: 'Pure Function', visible: false, matched: false}
10: {id: 10, contents: 'react-redux', visible: false, matched: false}
11: {id: 11, contents: 'react-redux', visible: false, matched: false}]

Answer 1

to update one object with new Values try this,

function updateFieldsInOneObjectInTheArray(
  state,
  itemKey,
  newContents,
  newVisible,
  newMached
) {
  const newState = state;
  const id = state?.[itemKey]?.id;
  const contents = newContents || state?.[itemKey]?.contents;
  const visible = newVisible || state?.[itemKey]?.visible;
  const matched = newMached || state?.[itemKey]?.visible;

  const record = {
    id: id,
    contents: contents,
    visible: visible,
    matched: matched,
  };

  newState[itemKey] = record;
  return newState;
}

Answer 2

Every element inside flipState has the property visible set as false except for the one you change at the beginning of your function. Because of this, after doing flipState.filter(card => card.visible) it will return an array with a single element so this destructuring you're doing const [index1, index2] = flipState.filter(card => card.visible).map(card => card.id); will always return a value for index1 and undefined for index2 which means the if will always evaluate to false, meaning matched wont change for any element.

I'm not sure exactly what you intend to do but if you want this specific function to work you will have to have at least 2 elements with visible as true.

Answer 3

something like this?

 let state = [ {id: 0, contents: 'Provider', visible: false, matched: false}, {id: 1, contents: 'Provider', visible: false, matched: false}, {id: 2, contents: 'selector', visible: false, matched: false}, {id: 3, contents: 'selector', visible: false, matched: false}, {id: 4, contents: 'useSelector()', visible: false, matched: false}, {id: 5, contents: 'useSelector()', visible: false, matched: false}, {id: 6, contents: 'useDispatch()', visible: false, matched: false}, {id: 7, contents: 'useDispatch()', visible: false, matched: false}, {id: 8, contents: 'Pure Function', visible: false, matched: false}, {id: 9, contents: 'Pure Function', visible: false, matched: false}, {id: 10, contents: 'react-redux', visible: false, matched: false}, {id: 11, contents: 'react-redux', visible: false, matched: false}, ]; const cardFlip = (id) => { const flipState = state.map((el)=>{ if(el.id===id){ el.matched=.el;matched. //el.visible=;el,visible. if you also want to flip visible. I'm not sure if you want to. return el }else return el }) return flipState } console.log(JSON.stringify(cardFlip(3)))