我有这个反冲状态对象：
export const LivePolygon = atom({
key: "LivePolygon",
default: {
radii: ['', ''],
coordinates: ['', ''],
tilt: ['']
},
});
在另一个文件上，我像这样导入它：
import { LivePolygon } from "../TheFileOfLivePolygon";
const [liveP, setLiveP] = useRecoilState(LivePolygon);
现在我想更新它的特定值（从导入它的另一个文件）。
例如，如果我想更新对象radii在第二个单元格中等于 5。
使用一个简单的变量我会这样做：
liveP.radii[1] = 5
我在这里可以怎样做呢？
我看到了一些相关问题，但没有一个对这个案子有帮助。
下面是一个带注释的示例，说明如何更新 Recoil 原子中的对象值。只需确保在更新时不要改变任何对象（对于任何 React 状态也是如此）。
body { font-family: sans-serif; }
button, pre { font-size: 1rem; }
pre { font-family: monospace; }
<div id="root"></div><script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react.development.js"></script><script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/react-dom.development.js"></script><script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/umd/recoil.min.js"></script><script src="https://unpkg.com/@babel/[email protected] /cdn-cgi/l/email-protection/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="env,react">
// import * as ReactDOM from 'react-dom/client';
// import {atom, RecoilRoot, useRecoilState} from 'recoil';
// This Stack Overflow snippet demo uses UMD modules instead of the above import statments
const {atom, RecoilRoot, useRecoilState} = Recoil;
// It won't make any difference whether you define this atom
// here in this module or define it in another module and import it:
const livePolyAtom = atom({
key: 'livePolygon',
default: {
radii: [0, 0],
coordinates: [0, 0],
tilt: [0],
},
});
function App () {
const [livePoly, setLivePoly] = useRecoilState(livePolyAtom);
const updateRadiiValue = () => {
// Make sure not to mutate any objects when returning the new object state:
setLivePoly(lp => {
const radii = [...lp.radii];
radii[1] = 5;
return {...lp, radii};
});
};
return (
<div>
<button onClick={updateRadiiValue}>Update radii value</button>
<pre><code>{JSON.stringify(livePoly, null, 2)}</code></pre>
</div>
);
}
const reactRoot = ReactDOM.createRoot(document.getElementById('root'));
reactRoot.render(
<RecoilRoot>
<App />
</RecoilRoot>
);
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
