React: more than more useState，how to get the values

[MaoGirlsQueen]

When using more than one useState, the response from the API contains more than one variable defined in the useState. How can we assign all states like this. setState ({... response}) to all states? If there are more than 10 useStates, this would be a waste of time.
for Example：

const [quickDate,setQuickDate] = useState( '9');
const [from,setFrom] = useState( getDateTime(getLastYear3Days()[0]));
const [to,setTo] = useState(getDateTime(getLastYear3Days()[1]));
const [index,setIndex] = useState('');
const [chargeState,setChargeState] = useState(0);
const [vin,setVin] = useState('');
const [vinStar,setVinStar] = useState('');
const [duration,setDuration] = useState('');
const [analysisType,setAnalysisType] = useState('single');
const [chartType,setChartType] = useState('bar');
const [selectColumns,setSelectColumns] = useState([]);
const [groupByColumns,setGroupByColumns] = useState([]);
const [rightBlock,setRightBlock] = useState([]);
const [dslFilters,setDslFilters] = useState([]);
const [dslFilterCombiner,setDslFilterCombiner] = useState('must');
const [dsl,setDsl] = useState('');
const [vinFilterVisible,setVinFilterVisible] = useState(false);
const [mySearch,setMySearch] = useState(null);

const mySearchInit = (searchId)=>{
dispatch({
type: 'common/fetchMySearchById',
payload: { id: searchId },
callback: (response) => {
let newState = JSON.parse(response.condition);
initVlaue(newState,response);
previewChart(newState);
mountInit(newState);
},
});
}
const initVlaue = (newState,response)=>{
setAnalysisType(newState.analysisType);
setChargeState(newState.chargeState);
setChartType(newState.chartType);
setDsl(newState.dsl);
setDslFilterCombiner(newState.dslFilterCombiner);
setDslFilters(newState.dslFilters);
setDuration(newState.duration);
setFrom(newState.from);
setGroupByColumns(newState.groupByColumns);
setIndex(newState.index);
setQuickDate(newState.quickDate);
setRightBlock(newState.rightBlock);
setSelectColumns(newState.selectColumns);
setTo(newState.to);
setVin(newState.vin);
setVinFilterVisible(newState.vinFilterVisible);
setVinStar(newState.vinStar);
setMySearch(response);
}

how to do ??

[artuross]

I think in this case you would be better off using a single useState and storing an entire object there. Another option worth considering (although it depends on your use case) is to use useReducer.

[miraage]

const initialState = {
  foo: 'bar',
  bar: 'baz',
};

const RESET = 'RESET';

const assignReducer = (state, payload) => {
  if (payload === RESET) {
    return initialState;
  }

  return Object.assign({}, state, payload);
};

const MyComponent = () => {
  const [state, setState] = useReducer(assignReducer, initialState);

  // update single key
  setState({ foo: 'foo' });

  // partial update
  setState({ foo: 'foo', bar: 'bar' });

  // reset
  setState(RESET);
}

[gaearon]

Using so many separate state variables seems like a bad idea in this case. Indeed the canonical solution here is useReducer or just an object in state.

[MaoGirlsQueen]

const initialState = {
  foo: 'bar',
  bar: 'baz',
};

const RESET = 'RESET';

const assignReducer = (state, payload) => {
  if (payload === RESET) {
    return initialState;
  }

  return Object.assign({}, state, payload);
};

const MyComponent = () => {
  const [state, setState] = useReducer(assignReducer, initialState);

  // update single key
  setState({ foo: 'foo' });

  // partial update
  setState({ foo: 'foo', bar: 'bar' });

  // reset
  setState(RESET);
}

very very very good