为了账号安全,请及时绑定邮箱和手机立即绑定

React TypeError:无法读取未定义的属性“getDates”

React TypeError:无法读取未定义的属性“getDates”

手掌心 2021-11-18 21:18:37
今天我决定更新我的 react 项目的依赖项,我的组件Home不再工作了,我实际上正在使用 apollo 客户端和 apollo react 钩子,这是 miHome组件文件:function Home(props) {    const {        loading,        data: { getPosts: posts }    } = useQuery(FETCH_POSTS_QUERY);    return (        <Grid columns={3} stackable={true} className={loading ? 'loading' : ''}>            <Grid.Row className='page-title'>                <h1>Recent Posts</h1>            </Grid.Row>            <Grid.Row>                {user && (                    <Grid.Column>                        <PostForm user={user} />                    </Grid.Column>                )}                {loading ? (                    <Loading />                ) : (                    posts &&                    posts.map(post=> (                        <Grid.Column key={post._id} style={{ marginBottom: 20 }}>                            <PostCard post={post} />                        </Grid.Column>                    ))                )}            </Grid.Row>        </Grid>    );}我在浏览器中收到此错误: “TypeError:无法读取未定义的属性‘getPosts’”我正在尝试用这个小小的代码变体来修复它:function Home(props){    let posts = '';    const { user } = useContext(AuthContext);    const { loading, data } = useQuery(FETCH_POSTS_QUERY);    if (data) {        posts = data.getPosts;    }一切正常,但如果我添加一个新帖子更新阿波罗缓存,该缓存会正确更新旧帖子和新帖子,但前端没有显示它,只显示旧帖子,直到我手动刷新页面。编辑:这是来自PostForm组件的代码,我也更新了Home组件,添加了PostForm:function PostForm(props) {    const { values, handleChange, handleSubmit } = useForm(createPostCallback, {        title: 'Example Title',        body: ''    });    const [createPost] = useMutation(CREATE_POST_MUTATION, {        variables: values,        update(dataProxy, result) {            const data = dataProxy.readQuery({                query: FETCH_POSTS_QUERY            });            data.getPosts = [result.data.createPost, ...data.getPosts];            dataProxy.writeQuery({                query: FETCH_POSTS_QUERY,                data            });            values.body = '';        }    });知道如何解决第一个代码问题吗?提前谢谢各位朋友!
查看完整描述

3 回答

?
大话西游666

TA贡献1817条经验 获得超14个赞

apollo 中对读写缓存的查询以不可变的方式工作。为了做到这一点,您必须使用一个新变量,您正在使用数据来写入缓存。尝试这样做:


  const [createPost] = useMutation(CREATE_POST_MUTATION, {

    variables: values,

    update (proxy, result) {

      const data = proxy.readQuery({

        query: FETCH_POSTS_QUERY

      })

      const new_post = result.data.createPost //here's the new var

      proxy.writeQuery({

        query: FETCH_POSTS_QUERY,

        data: { getPosts: [new_post, ...data.getPosts] } // here you're using that var to write the cache

      })

      values.body = ''

    }

  })


查看完整回答
反对 回复 2021-11-18
?
温温酱

TA贡献1752条经验 获得超4个赞

我通过将数据定义为对象 {} 修复了相同的错误,

只是通过添加更改了以下代码= {}


const {

  loading,

  data: { getPosts: posts } = {}

} = useQuery(FETCH_POSTS_QUERY);


查看完整回答
反对 回复 2021-11-18
?
交互式爱情

TA贡献1712条经验 获得超3个赞

我会接受您的if声明并将其设置在 a 中,useEffect以便它检查数据是否是真实的 onLoad,这样您就可以在数据更改时将其同步。


const [posts, setPosts] = useState([]);

useEffect(() => {

  if (data) {

    setPosts(data.getPosts);

  }

},[data])


if (posts.length === 0) {

  return <h3>No posts as of yet</h3>

}


查看完整回答
反对 回复 2021-11-18
  • 3 回答
  • 0 关注
  • 229 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信