Question

我正在使用GraphQL-Yoga软件包，我能够从服务器解析GraphQL查询，并且能够如您所见地在render方法中成功访问待办事项，但是，我想知道如何访问{{ 1}}在上述区域的道具，我尝试todos进行访问，但无法正常工作，任何建议将不胜感激。

this.props.todos

Answer 1

安装组件时，todos最初将是未定义的，直到查询完成。这意味着您将无法在componentDidMount内部访问它。如何解决这个问题可能取决于您在componentDidMount内部要做什么—可能有一种更好的方法可以在不依赖该生命周期方法的情况下完成同一件事。除非这样做，否则您必须创建一个包装器组件，以防止内部组件挂载直到查询完成。例如：

const WrapperComponent = ({ data: { todos } }) => todos
  ?  <YourComponent todos={todos}>
  :  null // In practice, you'd probably use a loading indicator instead
export default graphql(TodoQuery)(WrapperComponent)

您也可以使用recompose获得相同的效果。像这样：

import { branch, compose, renderNothing } from 'recompose'

compose(
  graphql(TodoQuery),
  branch(
    ({ date: { todos } }) => !todos,
    renderNothing
  )
)(App)

如何在外部渲染方法中访问prop

1 个答案: