同じ電子メール アドレスを持つ JSON ファイルから JSON オブジェクトのみをロードする方法はありますか?すべてのデータをロードできるのですが、メールアドレスのみでロードできるようにしたいです。クエリ セレクターはありますが、それ以外では、電子メールで検索して、loadedSurvey.js でレンダリングする方法がわかりません。
loadedSurvey.js:
class LoadedSurvey extends React.Component {
render() {
return (
<>
<div className="container">
<div className="col-6 mx-auto text-center">
<h1>Load Your Survey</h1>
<div>
<Filter
onTextChange={(text) => this.setState({ filterString: text })}
/>
</div>
{SubmittedData.map((submittedData, index) => {
return (
<div className="text-left">
<div>
<p>
<strong>Name: </strong>
</p>
<p>{submittedData.fullName}</p>
</div>
<div>
<p>
<strong>Email: </strong>
</p>
<p>{submittedData.email}</p>
</div>
<div>
<p>
<strong>
Are you aware you are canceling with your current
company and entering a contract with Company, Inc.?{" "}
</strong>
</p>
<p>{submittedData.message}</p>
</div>
<div>
<p>
<strong>
Do you understand you will be paying a monthly rate of
.95?
</strong>
</p>
<p>{submittedData.radioChoice}</p>
</div>
<div>
<p>
<strong>Check all that apply. I understand:</strong>
</p>
<p>{submittedData.checkboxChoice}</p>
</div>
<div>
<p>
<strong>Which of the following is not true?</strong>
</p>
<p>{submittedData.Select}</p>
</div>
<div>
<p>
<strong>Select all that apply:</strong>
</p>
<p>{submittedData.multiSelect}</p>
</div>
</div>
);
})}
<form>
<LoadSurveyComponent />
</form>
<Link
name="loadedSurveyToHomeButton"
className="btn btn-primary my-5 mx-5"
to="/"
>
Home
</Link>
</div>
</div>
</>
);
}
}
export default LoadedSurvey;
および FilterComponent.js:
import React from "react";
class Filter extends React.Component {
render() {
return (
<div>
<input
type="text"
onKeyUp={(event) => this.props.onTextChange(event.target.value)}
/>
</div>
);
}
}
export default Filter;
サンプルデータ:
{
"fullName": "Louis",
"email": "[email protected]",
"message": "No",
"radioChoice": "No",
"checkboxChoice": [
"I will be responsible for .95 each month until my contract is over.",
"I am entering into a new contract.",
"I have three days to cancel.",
"If I cancel after three days, I will be responsible for the remainder of the contract.",
"My system is monitored and if it is set off, the cops will come to my home."
],
"Select": "I will be responsible for the remaining balance of the contract if I cancel early.",
"multiSelect": [
"I am happy with the system as it has been explained to me.",
"I am happy with the level of customer service I have received today.",
"I am happy with the representatives who have helped protect my home today."
]
}
3
いいえ。毎回ファイル全体を取得できます。もちろん、解析後にフィルタリングすることもできます。
– ケビン B
2020 年 9 月 3 日 19:37
@KevinB ありがとうございます。データの解析を検討します。
– ヘザー
2020 年 9 月 3 日 19:49
------------------------
読み込み中にそれをフィルタリングすることはできませんが、オブジェクトの配列を取得したら、フィルタリングすることができます。あなたの場合、 .map の直前で実行できるはずです。
{SubmittedData.filter(submittedData => {
return submittedData.email === '[email protected]';
}).map((submittedData, index) => {
1
ステートにフィルタを適用することもできます。これは、レンダリングのたびにフィルタを実行するよりも効率的です。ただし、パフォーマンスが問題にならない限り、あまり心配する必要はありません。
– ケビン B
2020 年 9 月 3 日 20:17
