Блог

На самом деле у меня есть список элементов, которые должны храниться в массиве как состояние реакции.

 const [data, setData] = useState([{"name": "joy", "age": 25}, {"name": "tom", "age": 41}]);
  

Каким-то образом мне нужно обновить только определенный объект, может быть имя или возраст.

Я делаю таким образом. Но это кажется не очень хорошим.

     setData(prevState => {
      let obj = prevState.find(o => anycondition);
      if(obj !== undefined) {
        obj.name = "Demo";
      }
      return [...prevState];
    })
  

есть ли какой-либо другой способ обновить только объект из массива состояний с помощью реактивных перехватов?

Это изменение состояния!!

 setData(prevState => {
  let obj = prevState.find(o => anycondition);
  if(obj !== undefined) {
    obj.name = "Demo"; // <-- state mutation
  }
  return [...prevState];
})
  

Всегда следует неглубоко копировать текущее состояние, которое обновляется

 setData(prevState => {
  return prevState.map(el => <condition> ? { // <-- map state to new array
    ...el,        // <-- copy element
    name: "Demo", // <-- write new property
  } : el);
})
  

Если вам нужно выполнить какие-либо вычисления в рамках обратного вызова map, предоставьте обратному вызову обычное тело функции и добавьте любую необходимую логику.

 setData(prevState => {
  return prevState.map(el => { // <-- map state to new array
    // any mapping logic
    ...

    if (<condition>) {
      // any other logic
      ...
      return {
        ...el,        // <-- copy element
        name: "Demo", // <-- write new property
      }
    } else {
      return el;
    }
  });
})
  

Может быть, вы хотите что-то вроде этого?

здесь вы будете выполнять цикл только один раз и обновлять данные, которые вы хотите

 changeHandler = event => {
    const [name, value] = event.target.name
    setData(prevState => prevState.map(item => {
        if (anycondition) {
            return {
                ...item,
                [name]: value
            }
        }
        return item
    }))
}
  

Если вы также хотите получить некоторый идентификатор из входных данных, вы можете передать его с наборами данных, как здесь data-id={1}

А затем получить его из события, подобного этому, const id = e.target.dataset.id; в changeHandler функции

         <input
          type="text"
          name="name"
          data-id={1}
          value={this.state.data.name.fname}
          onChange={this.changeHandler}
        />
  

Чтобы справиться с этим с большим контролем, вы можете добавить идентификатор prop к каждому объекту.

Если вы хотите изменить конкретный объект, просто сделайте:

 const [data, setData] = useState([
    {   
        id: 1,
        name: "joy",
        age: 25
    },
    {
        id: 2,
        name: "tom", 
        age: 41
    }
]);


const updateItem = (id, attributes) => {
  const index = data.findIndex(item => item.id === id);

  if (index === -1)
    return;
  
  setData(
      [
         ...data.slice(0, index),
         Object.assign({}, data[index], attributes),
         ...data.slice(index   1)
      ]
  );
}


// You can update the second item as follows
updateItem(2, { age: 50 })
  

попробуйте этот способ 😉

 function mergeState(state, payload) {
  return { ...state, ...payload }
}

const [state, dispatch] = useReducer(mergeState, {
 name: '',
 age: 0,
 data: [{"name": "joy", "age": 25}, {"name": "tom", "age": 41}],
})

// get the data
const data = state.data.map(item => {
  if(obj !== undefined){
     obj.name = "Demo";
  }
  return item
})

// update
dispatch({data})