Javascript 从React检索状态数据

我有一个输入表单和

onSubmit

，输入值将被呈现到

复选框中。数据存储在MongoDB中-我可以看到我使用Robo3T输入的输入数据，所以我知道该部件正在工作。但是，控制台中的数组为空，并且没有添加到
复选框中

export const QUERY_ALL_CHORES = gql`
  query chores {
    chores {
      _id
      choreBody
    }
  }
`;

然后是我的
AddChoreForm.js

export default function AddChore(props) {
  const [choreBody, setBody] = useState("");
  const [addChore] = useMutation(ADD_CHORE, {
    update(cache, { data: { addChore } }) {
      try {
        const { chores } = cache.readQuery({ query: QUERY_ALL_CHORES });
        cache.writeQuery({
          query: QUERY_ALL_CHORES,
          data: { chores: [addChore, ...chores] },
        });
      } catch (e) {
        console.log(e);
      }

      // append new chore to the end of the array
      const { me } = cache.readQuery({ query: QUERY_ME });
      cache.writeQuery({
        query: QUERY_ME,
        data: { me: { ...me, chores: [...me.chores, addChore] } },
      });
    },
  });

  const handleFormSubmit = async (event) => {
    event.preventDefault();

    try {
      // add chore to database
      await addChore({
        variables: { choreBody },
      });

      // clear form value
      setBody("");
    } catch (e) {
      console.log(e);
    }
  };

return (
    <Container>
            <Form onSubmit={handleFormSubmit}>
              <Form.TextArea
                onChange={(event) => setBody(event.target.value)}
              />
              <Button>
                Add Chore
              </Button>
            </Form>
    </Container>
  );
}

尝试使用
useQuery
钩子传递
fetchPolicy:'network only'
选项，以强制从DB而不是apollo缓存进行提取

从：

默认情况下，组件将首先尝试从缓存读取数据，如果查询的完整数据在缓存中，Apollo只需从缓存返回数据

那么像这样
export const QUERY_ALL_CHORES=gql`QUERY CHORES{CHORES{{id choresbody}}}`选项：{fetchpolicy:'network only'}类似于：const{choreData}=useQuery（QUERY_ALL_CHORES，{fetchPolicy:'network only'}）；。。。。。。另外，当您在graphiql游乐场中运行查询时，查询是否返回结果中的choreData键？这仍然在控制台中为我提供了一个空数组，是的，我可以在GraphQL游乐场中看到所有输入数据。
export default function AddChore(props) {
  const [choreBody, setBody] = useState("");
  const [addChore] = useMutation(ADD_CHORE, {
    update(cache, { data: { addChore } }) {
      try {
        const { chores } = cache.readQuery({ query: QUERY_ALL_CHORES });
        cache.writeQuery({
          query: QUERY_ALL_CHORES,
          data: { chores: [addChore, ...chores] },
        });
      } catch (e) {
        console.log(e);
      }

      // append new chore to the end of the array
      const { me } = cache.readQuery({ query: QUERY_ME });
      cache.writeQuery({
        query: QUERY_ME,
        data: { me: { ...me, chores: [...me.chores, addChore] } },
      });
    },
  });

  const handleFormSubmit = async (event) => {
    event.preventDefault();

    try {
      // add chore to database
      await addChore({
        variables: { choreBody },
      });

      // clear form value
      setBody("");
    } catch (e) {
      console.log(e);
    }
  };

return (
    <Container>
            <Form onSubmit={handleFormSubmit}>
              <Form.TextArea
                onChange={(event) => setBody(event.target.value)}
              />
              <Button>
                Add Chore
              </Button>
            </Form>
    </Container>
  );
}

export default function ChoreList({ chores }) {
     // get chore data
  const { choreData } = useQuery(QUERY_ALL_CHORES);
  const chores = choreData?.chores || [];
  console.log("Chores: ", chores);    

  return (
    <>
      <Container chores={chores} >
        {chores &&
          chores.map((chore) => (
            <div key={chore._id}>
              <Form>
                <Form.Field>
                  <List>
                    <List.Item>
                      <List.Content>
                        {/* {chore.choreBody} */}
                        <Checkbox label={chore.choreBody} />
                      </List.Content>
                    </List.Item>
                  </List>
                </Form.Field>
              </Form>
            </div>
          ))}
      </Container>
    </>
  );
}