Создание простого среза состояния с отдачей
У меня есть запрос api, и мне нравится хранить ответ в атоме отдачи. Я пытаюсь понять, как лучше всего это сделать. Дело в том, что у моего селектора нет зависимости (атома), так как у моего запроса нет параметров:
const connectionsQuery = selector({
key: "Connections",
get: async () => {
const connections = await findConnections();
return connections;
},
});
Когда я выполняю следующее, я получаю информативную ошибку:
Вот как я использовал селектор:
function DashboardLayout() {
const classes = useStyles();
const [isMobileNavOpen, setMobileNavOpen] = useState(false);
console.info(222);
const connections = useRecoilValue(connectionsQuery);
console.info(333);
...
...
Консоль «222» зарегистрирована, но «333» никогда не регистрировалась.
Что мне не хватает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
const connectionsQuery = selector({
key: "Connections",
get: async ({ get }) => {
const connections = await get(findConnections);
return connections;
},
});
Я думаю, тебе не хватает реквизита, findConnections - это действительно состояние атома для вашего запроса ответа? или функция?
findConnections - это асинхронная функция, которая выбирает соединения
Вы должны обернуть свой компонент Suspense. awaiting селектора означает, что компонент, зависящий от значения этого селектора, приостанавливает рендеринг до тех пор, пока не будет значение, потому что Recoil внутренне будет бросать обещанием (что и является всей идеей приостановки в React).
Итак, чтобы заставить его работать, оберните ваш компонент DashboardLayout компонентом Suspense:
<React.Suspense fallback = {<div>loading...</div>}>
<DashboardLayout/>
</React.Suspense>
Об этом также говорится в документы отдачи. Чтобы узнать больше о параллельном режиме и саспенсе, вам следует прочитать официальный реагировать на документы, чтобы понять его механику.
Насколько я понимаю, в отдаче нет ничего плохого. Вероятно, ошибка возникает в
findConnections, попробуйте отладчик в нем.