我可以在组件中访问的道具无法呈现
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
我的 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