Question

我要在同一页上进行测试，稍后再将其移至其他组件中，我有一个输入字段，可将其值发送给状态，也从json中获取数据到状态，并且我正在显示该州的所有信息，但我只想显示与输入字段具有相同电子邮件的信息。我通过按钮发送它。

我只需要一种过滤显示的功能，但我不知道该怎么做。

class Testing extends Component {
  state = { data: [], value: "", filteredData: "" };
  handleSubmit = this.handleSubmit.bind(this);
  handleChange = this.handleChange.bind(this);

async componentDidMount() {
    await fetch("http://tenjoucesar.github.io/data.json")
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }


handleSubmit(e) {
    e.preventDefault();
    let email = this.state.value;
    fetch("https://tenjoucesar.github.io/data.json")
      .then(response => response.json())
      .then(data => {
        let result = data.filter(person => person.email === email);
        this.setState({ filteredData: result });
      });
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

这里的所有内容都可以使用，“表单”位于同一jsx

   <form onSubmit={this.handleSubmit}>
                  <input
                    type="email"
                    value={this.state.value}
                    onChange={this.handleChange}
                  />
                  <input
                    type="submit"
                    value="Submit"
                  />
                  </div>
                </form>

我如何显示数据？

         <ul>
                {data.map(person => {
                  return (
                    <div className="result" key={person.email}>
                      <h3 className="heading-tertiary">
                        {person.name}, &nbsp;{person.age}
                      </h3>
                      <p className="paragraph--result">{person.notes}</p>
                          );
                 })}

我正在显示所有内容，还将值发送给状态，我如何仅显示具有相同电子邮件的数据？谢谢！

Answer 1

let result = []
data.forEach(person => {
          if(person.email === 'targetemail@whatever.com')
          { result.push(
              <div className="result" key={person.email}>
              <h3 className="heading-tertiary">
                {person.name}, &nbsp;{person.age}
              </h3>
              <p className="paragraph--result">{person.notes}</p>
              </div>)
          }
}

Answer 2

希望对您有所帮助。您两次调用api来获取数据。我已经对其进行了更改以提高性能。

'use strict';

class Testing extends React.Component {
    state = { data: [], value: "", filteredData: [] };
    handleSubmit = this.handleSubmit.bind(this);
    handleChange = this.handleChange.bind(this);

  async componentDidMount() {
      await fetch("http://tenjoucesar.github.io/data.json",{mode: 'cors'})
        .then(response => response.json())
        .then(data => {
          this.setState({ data });
        });
    }

  handleSubmit(e) {
      e.preventDefault();
      let email = this.state.value;

      const filtered = this.state.data.filter((e) => e.email == email);

      this.setState({
        filteredData:filtered
      })

    }

    handleChange(e) {
      this.setState({ value: e.target.value });
    }

    InfomData = (person) => {
        return (
            <div className="result" key={person.email}>
                <h3 className="heading-tertiary">
                {person.name}, &nbsp;{person.age}
                </h3>
                <p className="paragraph--result">{person.notes}</p>
            </div>
        )
    }

    render () {

        const dataToRender = this.state.filteredData.map(
            (e) => this.InfomData(e) 
        )

        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input
                        type="email"
                        value={this.state.value}
                        onChange={this.handleChange}
                    />
                    <input
                        type="submit"
                        value="Submit"
                    />
                </form>
                {dataToRender}
            </div>
        )
    }

}

ReactDOM.render(
    <Testing />,
    document.getElementById('root')
)

如何根据输入的值从状态中过滤数据

2 个答案: