如何在 React JS 中呈现 API 响应？

Question

我是 React JS 的新手，我已经被一个问题困扰了很长一段时间。

所以，这是代码，

import React from 'react';

class SearchForm extends React.Component {

async handleSubmit(event){
      event.preventDefault();
try{
const url ='/jobs/all/'
const Response = await fetch((url),{
    method: `GET`,
    mode: 'cors',
        headers: { 
            'Accept': 'application/json'
          }});

const filtered = [];

const res = await Response.json();
const Location = this.refs.location.value;
const Category = this.refs.category.value; 

Object.keys( res ).forEach( function( key ) {
    if( res[key].location === Location && res[key].category === Category ) {
        filtered[key] = res[key];}
});
console.log(filtered)
        }
 catch (err) {
    console.error('err', err);}
    };
    render() {
      return (
        <div>
        <form action="/search" onSubmit={this.handleSubmit.bind(this)}>
          <select ref="category">
            <option value="" defaultValue>Category</option>
            <option value="Ios Developer">Ios Developer</option>
            <option value="Java Developer">Java Developer</option>
            <option value="Marketing">Marketing Generalist</option>
            <option value="Web Developer">Web Developer</option>
            <option value="Python Developer">Python Developer</option>
            <option value="C# Developer">C# Developer</option>
          </select>
          <select ref="location">
            <option value="" defaultValue>Location</option>
            <option value="Lucknow">Lucknow</option>
            <option value="Ranchi">Ranchi</option>
            <option value="Delhi">Delhi</option>
          </select>
          <button>Find</button>
        </form>
        </div>
      );
    }
  }

export default SearchForm;

这是我的回应，

Response

我想呈现响应。 还有一些情况会导致多个响应，我想渲染所有这些。

请帮帮我。

Answer 1

请尝试以下代码。

import React from 'react';

class SearchForm extends React.Component {
state={
filtered :[]
}

async handleSubmit(event){
      event.preventDefault();
try{
const url ='/jobs/all/'
const Response = await fetch((url),{
    method: `GET`,
    mode: 'cors',
        headers: { 
            'Accept': 'application/json'
          }});

const filtered = [];

const res = await Response.json();
const Location = this.refs.location.value;
const Category = this.refs.category.value; 

Object.keys( res ).forEach( function( key ) {
    if( res[key].location === Location && res[key].category === Category ) {
        filtered[key] = res[key];}
});
this.setState({filtered })
        }
 catch (err) {
    console.error('err', err);}
    };
    render() {
      return (
        <div>
        <form action="/search" onSubmit={this.handleSubmit.bind(this)}>
          <select ref="category">
            <option value="" defaultValue>Category</option>
            <option value="Ios Developer">Ios Developer</option>
            <option value="Java Developer">Java Developer</option>
            <option value="Marketing">Marketing Generalist</option>
            <option value="Web Developer">Web Developer</option>
            <option value="Python Developer">Python Developer</option>
            <option value="C# Developer">C# Developer</option>
          </select>
          <select ref="location">
            <option value="" defaultValue>Location</option>
            <option value="Lucknow">Lucknow</option>
            <option value="Ranchi">Ranchi</option>
            <option value="Delhi">Delhi</option>
          </select>
          <button>Find</button>
        </form>
        {this.state.filtered.map((data)=>{
           return <div>{data.location}</div>  // you can render here list items
        })}
        </div>
      );
    }
  }

export default SearchForm;