useSetRecoilState(state)

返回一个用于更新可写 Recoil 状态值的设置函数。

function useSetRecoilState<T>(state: RecoilState<T>): SetterOrUpdater<T>;

type SetterOrUpdater<T> = (T | (T => T)) => void;

state: 可写 Recoil 状态（一个 atom 或一个可写 selector）

返回一个设置函数，它可以异步用于更改状态。设置函数可以接收一个新值，也可以接收一个更新函数，该函数接收先前值作为参数。

当组件打算写入状态而不读取它时，这是推荐使用的挂钩。如果组件使用 useRecoilState() 挂钩来获取设置函数，它还会订阅更新并在原子或选择器更新时重新渲染。使用 useSetRecoilState() 允许组件设置值，而不会在值更改时订阅组件重新渲染。

示例

import {atom, useSetRecoilState} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['Ella', 'Chris', 'Paul'],
});

function FormContent({setNamesState}) {
  const [name, setName] = useState('');
  
  return (
    <>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setNamesState(names => [...names, name])}>Add Name</button>
    </>
)}

// This component will be rendered once when mounting
function Form() {
  const setNamesState = useSetRecoilState(namesState);
  
  return <FormContent setNamesState={setNamesState} />;
}

示例​

示例