首页 文章

我无法呈现我在组件中访问的道具

提问于
浏览 次
0

我的MERN应用程序的目的是从用户获取3位数输入并返回包含这些数字的第一个素数（例如：您输入026，应用程序返回10267） . 如果我的 checker() 函数找到匹配项，我运行 updatePrimeNumber() 将该素数的"match"变量更新为true . 数据库正在正确更新 .

我想显示"match"等于true的所有素数 . 我有一个道具， primeNumbers ，其中包含我输入数据库的所有素数 . 我可以在我的组件中访问这些数字，但我无法弄清楚如何呈现它们中的任何一个，无论是否真实 . 我收到的错误是 primeNumbers is not defined .

import React, { Component } from 'react';
import gql from "graphql-tag";
import { graphql, compose } from 'react-apollo';

const PrimeNumbersQuery = gql`
{
  primeNumbers {
    id
    text
    match
  }
}
`;

const UpdateMutuation = gql`
  mutation($id: ID!, $match: Boolean!) {
    updatePrimeNumber(id: $id, match: $match)
  }
`;

class Prime extends Component {
  checker = (primes) => {
    let nums = this.props.checkedNumbersFromParent;
    let recentChecked = (nums[nums.length - 1].text);
    let recentCheckedRegExp = new RegExp(recentChecked);
    for (var i in primes) {
      let count = 0;
      if (primes[i].text.search(recentCheckedRegExp) >= 0 && count < 1) {
        this.updatePrimeNumber(primes[i]);
        count = count + 1;
        break;
      }
    }
    return primes;
  }

  updatePrimeNumber = async (primeNumber) => {
    await this.props.updatePrimeNumber({
      variables: {
        id: primeNumber.id,
        match: primeNumber.match
      },
      update: store => {
        const data = store.readQuery({ query: PrimeNumbersQuery });
        data.primeNumbers = data.primeNumbers.map(
          x =>
            x.id === primeNumber.id
            ? {
                ...primeNumber, match: true
              }
            : x
        );
        store.writeQuery({ query: PrimeNumbersQuery, data });
      }
    });
  };

  render() {
    const {data: {loading, primeNumbers}} = this.props;
    this.checker(primeNumbers)
    return (
      <div>
      ***Need to render all primeNumbers with match === true***
      </div>
    );
  }
}

export default compose(
  graphql(UpdateMutuation, {name: 'updatePrimeNumber'}),
  graphql(PrimeNumbersQuery)
)(Prime);

感谢任何看过这个的人 . 非常感谢 .

reactjs mongodb graphql react-apollo

2 回答

  • 0

    哪一行是被抛出的错误？

    您可以尝试使用过滤器，而不是更新primeNumber中的匹配项 .

    渲染素数代替 Need to render all primeNumbers with match === true 循环遍历primeNumbers

    回复于
  • 0

    关于你的问题：primeNumbers没有定义.UpdatePrimeNumber是异步的，你需要先检查它并添加构造函数来初始this.props .

    constructor(){
      super(props)
    }
 renderprime(){
    this.checker(this.props.data.primeNumbers)
    if (this.props.data.primeNumbers){
        return (
            <div>
                {this.props.data.primeNumbers.map((item) => {
                    if (item.match){
                        return (
                            <div>
                                <div>{item.id}</div>
                                <div>{item.text}</div>
                            </div>
                        )
                    }
                })}
            </div>
        )
    }
}
...
   <div>
     {this.renderprime()}
  </div>
    回复于

相关问题