如何更新反冲状态对象的特定值

Question

我有这个反冲状态对象：

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

我这里怎么办？我看到了一些关于它的问题，但没有一个对这个案例有帮助。

Answer 1

这是一个关于如何更新 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/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>

如何更新反冲状态对象的特定值

How can i update a specific value of a recoil state object

javascript

reactjs

use-state

recoiljs