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

Posted 2023-03-08

【中文标题】我可以在组件中访问的道具无法呈现

【英文标题】：Prop I can access in component can't be rendered

【发布时间】：2019-05-10 10:45:52

【问题描述】：

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

我想显示所有“匹配”为真的素数。我有一个道具，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);

感谢所有看到这个的人。非常感谢。

【参考方案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>

【参考方案2】：

错误是从哪一行抛出的？

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

渲染素数替换 需要用 match === true 渲染所有 primeNumbers 循环遍历 primeNumbers