Создание объектов из состояний

Question

У меня есть два состояния:

  const [firstState, setFirstState]   = useState(6.5)
  const [secondState, setSecondState] = useState(3.5)

Я хочу объединить эти два состояния в объект, например:

  const [myObject, setMyObject] = useState({
    first: {firstState},
    second: {secondState}
  });
//NOTE: This does not compile when i try to create state-object with state values.

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

<ChildComponent objectToChild={myObject}/>

Какая наилучшая методика для объединения состояний в объект?

Answer 1

Их разные варианты

1. Использование useState Hook

const [myObject, setMyObject] = useState({
    first: firstState,
    second: secondState
  });

изменить состояние

setMyObject({...myObject, firstState })

2. Использование useReducer

useReducer обычно предпочтительнее, чем useState, если у вас сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего.

const initialState = {
    first: 'name',
    second: 'surname'
};

const reducer = (state, action) => {
  switch (action) {
    case 'first': return { ...state, first: state.first };;
    case 'second': return { ...state, second: state.second };;
    default: throw new Error('Unexpected action');
  }
};

используйте это как

const [state, dispatch] = useReducer(reducer, initialState);

Answer 2

Вы можете просто создать объект в качестве аргумента в методе useState, поэтому это будет выглядеть так:

const [user, setUser] = useState({});

и вызовите метод setUser следующим образом:

setUser(prevState => {
   return {...prevState, [user.firstState]: 6.5}
}

Узнайте больше об использовании крючка состояния здесь: https://pl.reactjs.org/docs/hooks-reference.html#usestate