I'm having a recoil issue that I'm sure is pretty basic--but like, so basic they didn't bother explaining it in the docs. In file 1, I have the following code:
export const questionState = atomFamily({
key: "question",
default: { question: "", answers: [] },
effects_UNSTABLE: (id) => [
({ onSet, setSelf }) => {
setSelf(cachedQuestionsAPI.getItem(id, "question"));
onSet((question) => {
updateServerItem(question, "question");
});
},
],
});
export const correctAnswersState = selectorFamily({
key: "correctAnswers",
default: [],
get:
(id) =>
({ get }) => {
const question = get(questionState(id));
return question.answers?.filter((answer) => answer.is_correct);
},
});
export default function Question({ id, questionType }) {
const question = useRecoilValue(questionState(id));
const correctAnswers = useRecoilValue(correctAnswersState(id));
console.log(correctAnswers);
return (
<div>
TEST
</div>
);
}
console.log(correctAnswers) here gives the expected result HOWEVER, when I import it to a sibling file, it yields an empty array. Here's that code:
import { atom, useRecoilState, useRecoilValue, selectorFamily } from "recoil";
import { correctAnswersState, questionState } from "../Question";
export default function FillInTheBlank({ onSet, question }) {
const correctAnswers = useRecoilValue(correctAnswersState(question.id));
console.log(correctAnswers);
return (<div>TEST</div>)
}
I'm just confused bc I thought that when I imported that correctAnswersState selectorFamily into my other file, it was essentially a pointer to the same stateful data. There's clearly some conceptual recoil thing I just don't get here.
Oddly enough, I have this code in that second file, which DOES work:
const correctAnswersStringsState = selectorFamily({
key: "correctAnswerStrings",
default: [],
get:
(id) =>
({ get }) => {
const question = get(questionState(id));
const correctAnswers = get(correctAnswersState(question.id));
const correctAnswerStrings = correctAnswers?.map(
(answer) => answer.answer
);
return correctAnswerStrings;
},
});
But it doesn't work if I take out the get(questionState(id)) call, even though get(correctAnswersState(question.id)) calls it too.