在React中通过电子邮件加载JSON

问题描述

是否可以从我的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
                        $49.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": "[e-mail]","message": "No","radioChoice": "No","checkBoxChoice": [
      "I will be responsible for $49.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."
    ]
  }

解决方法

您无法在加载期间将其过滤掉，但是，一旦有了对象数组，就可以对其进行过滤。根据您的情况，您应该可以在.map之前进行操作。

{SubmittedData.filter(submittedData => {
  return submittedData.email === '[e-mail]';
}).map((submittedData,index) => {