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

今天我决定更新我的react项目的依赖项，我的组件主页不再工作，我实际上正在使用apollo客户端和apollo react挂钩，这是mi Home组件文件：

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>
    );
}

一切都很好，但是如果我添加一个新的帖子来更新apollo缓存，缓存会正确地更新旧帖子和新帖子，但是前端没有显示它，只显示旧帖子，直到我手动刷新页面

编辑： 这是PostForm组件的代码，我也更新了Home组件，添加了PostForm：

知道如何解决第一个代码问题吗？ 提前谢谢各位朋友

我会接受您的if语句，并将其设置在useffect中，以便它进行检查 如果数据是真实的onLoad，那么您可以在数据更改时将其同步到

const [posts, setPosts] = useState([]);
useEffect(() => {
  if (data) {
    setPosts(data.getPosts);
  }
},[data])

if (posts.length === 0) {
  return <h3>No posts as of yet</h3>
}

我会接受你的if语句，并将其设置在useffect中，以便它进行检查 如果数据是真实的onLoad，那么您可以在数据更改时将其同步到

const [posts, setPosts] = useState([]);
useEffect(() => {
  if (data) {
    setPosts(data.getPosts);
  }
},[data])

if (posts.length === 0) {
  return <h3>No posts as of yet</h3>
}

---

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

常量[createPost]=使用突变创建后突变{ 变量：值， 更新代理，结果{ const data=proxy.readQuery{ 查询：获取\u帖子\u查询 } const new_post=result.data.createPost//这是新的变量 proxy.writequiry{ 查询：获取\u帖子\u查询， 数据：{getPosts:[new_post，…data.getPosts]}//这里您使用该变量来写缓存 } values.body= } }

---

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

常量[createPost]=使用突变创建后突变{ 变量：值， 更新代理，结果{ const data=proxy.readQuery{ 查询：获取\u帖子\u查询 } const new_post=result.data.createPost//这是新的变量 proxy.writequiry{ 查询：获取\u帖子\u查询， 数据：{getPosts:[new_post，…data.getPosts]}//这里您使用该变量来写缓存 } values.body= } }

---

我修复了将数据定义为对象{}时的相同错误 刚刚通过添加={}更改了下面的代码

常数{ 加载， 数据：{getPosts:posts}={} }=useQueryFETCH\u POSTS\u QUERY；

---

我修复了将数据定义为对象{}时的相同错误 刚刚通过添加={}更改了下面的代码

常数{ 加载， 数据：{getPosts:posts}={} }=useQueryFETCH\u POSTS\u QUERY；

---

useQuery是承诺吗？它是Apollo react钩子，如下所示：从“@Apollo/react钩子”导入{useQuery}；const{loading，data:{getDates:dates}}=useQueryFETCH\u POSTS\u QUERY；useQuery是承诺吗？它是Apollo react钩子，如下所示：从“@Apollo/react钩子”导入{useQuery}；const{loading，data:{getDates:dates}}=useQueryFETCH\u POSTS\u QUERY；谢谢你的回复，我尝试了你的建议：让posts=；const{user}=useContextAuthContext；const{loading，data}=useQueryFETCH\u POSTS\u QUERY；useffect=>{if data{posts=data.getPosts；}}，[data]；但它呈现时带有一个警告：./src/Pages/Home.js第18:12行：每次呈现后，从React Hook Useffect内部对“dates”变量的赋值将丢失。若要随时间保留该值，请将其存储在useRef挂钩中，并将可变值保留在“.current”属性中。否则，您可以将此变量直接移动到useffect react hooks/console.log data.getPosts中？这给了你什么？嗯，你试过把它设置为一个局部状态而不是一个post变量吗？const[post，setPost]=useState，然后是setPostsdata.getpoststanks感谢您的回复，我已经尝试了您的建议：让posts=；const{user}=useContextAuthContext；const{loading，data}=useQueryFETCH\u POSTS\u QUERY；useffect=>{if data{posts=data.getPosts；}}，[data]；但它呈现时带有一个警告：./src/Pages/Home.js第18:12行：每次呈现后，从React Hook Useffect内部对“dates”变量的赋值将丢失。若要随时间保留该值，请将其存储在useRef挂钩中，并将可变值保留在“.current”属性中。否则，您可以将此变量直接移动到useffect react hooks/console.log data.getPosts中？这给了你什么？嗯，你试过把它设置为一个局部状态而不是一个post变量吗？const[post，setPost]=useState，然后是setPostsdata.getPostsPerfect！作品丝般柔滑，谢谢你的帮助！很高兴帮助你！完美的作品丝般柔滑，谢谢你的帮助！很高兴帮助你！

const [posts, setPosts] = useState([]);
useEffect(() => {
  if (data) {
    setPosts(data.getPosts);
  }
},[data])

if (posts.length === 0) {
  return <h3>No posts as of yet</h3>
}