Question

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

我想显示“匹配”等于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);

感谢所有关注此内容的人。非常感谢。

Answer 1

关于您的问题：没有定义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>

Answer 2

从哪一行抛出错误？

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

使素数替换 需要使用匹配=== true 呈现所有质数遍历primeNumbers

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

2 个答案: