Tengo este objeto de estado de retroceso:
export const LivePolygon = atom({ key: "LivePolygon", default: { radii: ['', ''], coordinates: ['', ''], tilt: [''] }, });Y en otro archivo lo importo así:
import { LivePolygon } from "../TheFileOfLivePolygon"; const [liveP, setLiveP] = useRecoilState(LivePolygon);Ahora quiero actualizar un valor específico (desde el otro archivo, donde se está importando).
Por ejemplo, si quiero actualizar los radii del objeto en la segunda celda para que sean iguales a 5.
Con una variable simple lo haría así:
liveP.radii[1] = 5
¿Cómo puedo hacerlo aquí? Vi algunas preguntas al respecto, pero ninguna ayudó con este caso.
Aquí hay un ejemplo comentado de cómo actualizar un valor de objeto en un átomo de Recoil. Solo asegúrese de no mutar ningún objeto mientras lo actualiza (lo mismo es cierto para cualquier estado de React).
body { font-family: sans-serif; } button, pre { font-size: 1rem; } pre { font-family: monospace; } <div id="root"></div><script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script><script src="https://unpkg.com/recoil@0.7.2/umd/recoil.min.js"></script><script src="https://unpkg.com/@babel/standalone@7.17.11/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>