React. js Context API: Как обновить только пару значений объекта при сохранении других пар?

Question

Я занимаюсь разработкой веб-приложения с использованием React и использую контекстный API для хранения некоторой информации в нескольких компонентах различной иерархии. Я сохраняю объект, который выглядит ниже в приложении. js:

 /*
 import Userinfo from './context/Userinfo'
 */

 function App() {
      const [userinfo, setuserinfo] = useState({id: some_id, username: some_username, profile_picture: some_profile_picture})
 /*
 */
 }

, а затем использую контекст более глубокого компонента, как показано ниже:

 import Userinfo from '../context/Userinfo';

 function Profile() {
      const {userinfo, setuserinfo)=useContext(Userinfo);

      const infoupdate = () => {  //Function to update the userinfo stored by context API
           setuserinfo({id: new_id, username: new_username, profile_picture: new_profile_picture})
      }
     /////////

Вопрос в том, Как мне обновить только одну пару хранимых объектов? Например, допустим, я хочу обновить только часть id, оставив остальные поля такими же. Какой будет синтаксис для этого?

Заранее большое спасибо!

Answer 1

Для меня этот вопрос касается useState() API вместо useContext().

Функция setState(), возвращаемая из const [state, setState] = useState(), в вашем примере функция setuserinfo() фактически имеет другую сигнатуру, которая принимает функцию в качестве аргумента.

При вызове эта функция передается в предыдущем состоянии в качестве аргумента. Вы можете просто добавить это prevState, чтобы сохранить старые пары, и изменить только поле id:

const infoupdate = () => {
    setuserinfo(prevState => ({
        ...prevState,
        id: new_id,
    }))
}

Answer 2

Идея состоит в том, что вы делаете копию своего объекта, а затем изменяете поле нового объекта

const userinfo = {
  id: new_id, 
  username: new_username, 
  profile_picture: new_profile_picture
}

const newUserInfo = {
  ...userInfo, // deep copy userInfo into newUserInfo (
  id: 'new_id' // update id to 'new_id', other fields are not changed
}

// update userInfo 
setUserInfo(newUserInfo)

Способ, которым я создал newUserInfo, заключается в том, что я соединил следующие строки в 1 вкладыш

// create a copy of userInfo
const newUserInfo = {
  ...userInfo,
}

// change the id of the the new object
newUserInfo.id = 'new_id'