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

Prop I can access in component can't be rendered

我的 MERN 应用程序的目的是从用户那里获取 3 位数字输入和 return 包含这些数字的第一个质数(例如:您输入 026,应用程序 returns 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);

感谢所有看到这篇文章的人。非常感谢。

关于你的 problem:primeNumbers 不是 defined.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>

从哪一行抛出错误?

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

渲染质数替换 需要渲染所有匹配 === true 的素数 遍历 primeNumbers