失败的道具类型：道具`children`在`Mutation`中标记为必填，但其值为`undefined`答案

【问题标题】：Failed prop type: The prop `children` is marked as required in `Mutation`, but its value is `undefined`失败的道具类型：道具`children`在`Mutation`中标记为必填，但其值为`undefined`
【发布时间】：2019-05-21 02:10:57
【问题描述】：

我正在尝试使用 Apollo 将一些信息写入 GraphQL/MongoDB 数据库，但突变总是出错。

也许有人可以帮助我:(？

我使用 this.addTracker(); 调用带有所需参数的函数；在 onComponentDidMount();

    addTracker(trackerModelID, Hash, userId){
    console.log("Typ: " + trackerModelID);
    console.log("Access-Tooken: " + Hash.access_token)

    var access_token = Hash.access_token
    var token_type = Hash.token_type
    var expires_in = Hash.expires_in
    var user_id = Hash.user_id

    const createTrackerMutation = gql`
        mutation CreateTrackerMutation($trackerModelID: ID, $userId: ID, 
       $access_token: String, $token_type: String, $expires_in: Int, $user_id: String)
        {  createTracker (
            trackerModelID: $trackerModelID,
            userId: $userId,
            access_token: $access_token,
            token_type: $token_type,
            expires_in: $expires_in,
            user_id: $user_id
            )
            {
            id
            }
        }
        `
         console.log("jetzt run")   
        return(
          <div>hi
        <Mutation 
            mutation={createTrackerMutation} 
            variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
        </Mutation>
        </div>  
        )
    }

错误信息：警告：失败的道具类型：道具children在Mutation中标记为必填，但其值为undefined。在突变中（在 fitbit.js:97）

【问题讨论】：

标签： reactjs graphql apollo react-apollo

【解决方案1】：

错误来自 Mutation 内的 propTypes 定义。

错误提示 Mutation 需要孩子作为道具，但没有 children 传递给 Mutation

你需要在那里插入孩子：

  <Mutation 
        mutation={createTrackerMutation} 
        variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
     [INSERT_CHILDREN_HERE]
    </Mutation>

Children 可以是 JSX 元素、文本或其他内容，具体取决于 Mutation 的期望。根据文档，Mutation 使用renderProp pattern。所以你应该给它传递一个返回一些JSX的函数。 Here is a good example in the doc

【讨论】：

嗯，我明白了。如何在加载时直接运行突变？
我认为你的突变被正确触发了，你现在必须将它的结果插入Mutation。看看它是怎么做的here:

【解决方案2】：

如错误所示，Mutation 组件期望传递给它的 children 属性，但您没有提供。 Query 和Mutation 组件都使用render props 模式，这意味着您提供的children 实际上应该是一个返回要呈现的组件的函数。

<Mutation 
  mutation={createTrackerMutation} 
  variables={{ trackerModelID, userId, access_token, token_type, expires_in, user_id }}>
  {(mutate, result) => {
    return (
      <div>Your component here.</div>
    )
  }}
</Mutation>

可以在here 找到有关 render prop 函数签名的详细信息，但从广义上讲，它传递了一个 mutate 函数作为它的第一个参数，然后，为了方便起见，一个 results 对象作为第二个参数。 mutate 函数就是你调用来触发突变的函数。

与 Query 组件不同，它将运行您在挂载时传递给它的任何查询，Mutation 组件在调用 mutate 之前不会运行关联的 GraphQL 查询。这是有意为之，因为大多数变异通常在发生某种用户操作之前不需要发生。

如果您需要在安装组件时运行突变，则在 Mutation 组件内呈现的组件需要作为道具传入 mutate。然后该组件可以在其componentDidMount 方法中调用mutate。这个问题之前有人问过，更详细的答案可以在here找到。

【讨论】：