如何用状态变量react钩子替换对象值

Question

我有一个名为的状态变量

authInfo:

const [authInfo, setAuthinfo] = useState(null)

authInfo状态下的数据显示如下：

{
data:
id:
email:
full_name:
authorities: [{label: "admin", value: 1}, {label: "canEdit", value: 2}]
}

那么我有另一个数组。

const newAuthorities = [{label: 'canApprove', value 2}, {label: 'canDissaprove', value2}]

我希望将其存储在一个新的状态变量中，并使用新的Auth变量替换authority的值来复制旧的authInfo。

以下是预期输出

{
data:
id:
email:
full_name:
authorities: [{label: 'canApprove', value 2}, {label: 'canDissaprove', value2}]

}

如何在另一个状态变量中将authority值替换为newAuthority值？

谢谢！

Answer 1

const newAuthorities = [{label: 'canApprove', value 2}, {label: 'canDissaprove', value2}]
const data = {...authInfo}
data.authorities = newAuthorities
setAuthinfo(data)

Answer 2

// Get a hook function
const {useState} = React;
const Auth = () => {

const authBase = {
data: null,
id: null,
email:null,
full_name: null,
authorities: [{label: "admin", value: 1}, {label: "canEdit", value: 2}]
}

const newAuthorities = [{label: 'canApprove', value: 2}, {label: 'canDissaprove', value: 2}]

const [authInfo, setAuthInfo] = useState(authBase)

const update = () => {
setAuthInfo({ ...authInfo, authorities: newAuthorities })
}
return (
<div>
<button onClick={update}>
Update
</button>
<pre>{JSON.stringify(authInfo, false, 2)}</pre>
</div>
);
};

// Render it
ReactDOM.render(
<Auth />,
document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>