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

Question

My MERN app's purpose is to take a 3-digit input from a user and return the first prime number that contains those digits (ex: you enter 026, the app returns 10267). If my checker() function finds a match, I run updatePrimeNumber() to update that prime number's "match" variable to true. Database is updating properly.

I want to display all prime numbers that have "match" equal to true. I have a prop, primeNumbers , which contains all the primes I have entered into the database. I can access those numbers throughout my component, but I can not figure out how to render any of them, true or not. The error I receive is that 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);

Thank you to anyone who looks at this. It is much appreciated.

Answer 1

About your problem:primeNumbers is not defined.UpdatePrimeNumber is async, you need to check it first and add constructor to initial 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

which line is the error being thrown from ?

You can try using the filter instead of updating the match in the primeNumber.

to render the prime numbers replace Need to render all primeNumbers with match === true loop through the primeNumbers