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

Posted 2023-02-21

【中文标题】React TypeError：无法读取未定义的属性“getDates”

【英文标题】：React TypeError: Cannot read property 'getDates' of undefined

【发布时间】：2020-02-10 14:06:19

【问题描述】：

今天我决定更新我的 react 项目的依赖项，我的组件 Home 不再工作了，我实际上正在使用 apollo 客户端和 apollo react hooks，这是 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>
    );

我在浏览器中收到此错误： “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 = '';
        
    );

    function createPostCallback() 
        createPost();
    

知道如何解决第一个代码问题吗？ 在此先感谢队友！

【问题讨论】：

useQuery 是一个承诺吗？

它是一个 Apollo-react-hook，像这样：import useQuery from '@apollo/react-hooks'; const loading, data: getDates: dates = useQuery(FETCH_POSTS_QUERY);

【参考方案1】：

我修复了将数据定义为对象时的相同错误 只是通过添加= 来更改以下代码

const 
  loading,
  data:  getPosts: posts  = 
 = useQuery(FETCH_POSTS_QUERY);

【参考方案2】：

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 = ''
    
  )

【讨论】：

完美！效果如丝般顺滑，感谢您的帮助！

很高兴为您提供帮助！

【参考方案3】：

我会采用您的 if 声明并将其设置在 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>

【讨论】：

感谢您的回复，我已经尝试过您的建议：let posts = ''; const user = useContext(AuthContext); const loading, data = useQuery(FETCH_POSTS_QUERY); useEffect(() => if (data) posts = data.getPosts; , [data]);

但它呈现警告："./src/Pages/Home.js 第 18:12 行：从 React Hook useEffect 内部对 'dates' 变量的赋值将在每次之后丢失渲染。”

"要随着时间的推移保留该值，请将其存储在 useRef Hook 中并将可变值保留在 '.current' 属性中。否则，您可以直接在 useEffect react- 中移动此变量hooks/exhaustive-deps"

你能 console.log data.getPosts 吗？这给了你什么？

嗯，您是否尝试将其设置为本地状态而不是后变量？ const [post, setPost] = useState('') 然后setPosts(data.getPosts)