从状态创建对象

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 通常比 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}
}

在此处阅读有关 useState 钩子的更多信息： https://pl.reactjs.org/docs/hooks-reference.html#usestate