如何循环通过 Axios 对 React 中的表的响应答案

【问题标题】：How do I loop through the Axios response to a table in React如何循环通过 Axios 对 React 中的表的响应
【发布时间】：2020-11-19 23:41:11
【问题描述】：

我正在尝试开发一个小型项目，以检索 React 和 Node 作为后端中可用列出的作业列表。有点卡在来自 axios 的响应上。这是来自 axios 响应的响应。

我想将数组数据显示到表格或列表中以显示可用作业

下面是获取数据的代码

import React, {  useState, useEffect } from 'react'
import Layout from '../../core/Layout'
import axios from 'axios'
import {  getCookie, isAuth, signout } from '../../auth/helpers';


const Find = () => {

  const [values, setValues] = useState({
    title:"",
    duration:"",
    durationSys:"",
    budget:'',
    addedBy:'',
     category:'',
     results:[],
     searched: false

      });


     const {  category} = values;
    const token = getCookie('token');
    const handleChange = category => event => {
     console.log(event.target.value);
     setValues({ ...values, [category]: event.target.value});
    };

    const handleClick = event =>{
      event.preventDefault()
    listJobs()
    }

   const listJobs = () =>{
    axios.get( `${process.env.REACT_APP_API}/search-projects`,
    {params: {category
  }
 })
   .then(response => {
    console.log('LOG SUCCESS --', response.data);
    const data = response.data;
   setValues({...values, results: data})
   console.log('LOG STATE', data)
    })

  }


   return (
  <Layout>
       <div class="form-group">
            <label for="exampleFormControlSelect1">Category</label>
            <select onChange={handleChange('category')}  value={category} class="form-control" 
          id="exampleFormControlSelect1">
            <option>--Select Category --</option>
            <option value='Web Development'>Web Development</option>
            <option value='Logo Design'>Logo Design</option>
            <option value='Writing/Skills'>Writing/Skills</option>
            <option value='Mobile App Development'>Mobile App Development</option>
            <option value='SEO/Marketing'>SEO/Marketing</option>
            </select>
        </div>
        <div class="d-flex justify-content-center">
        <button onClick={handleClick} class="btn btn-default btn-info" style={{marginBottom: "15px"}}>Search</button>
        </div>
        <div>
          <h5>List of available jobs</h5>
            //here
        </div>

  </Layout>
)
  }


  export default Find;

【问题讨论】：

标签： reactjs axios react-hooks

【解决方案1】：

您好，您可以这样做。

<ul>
 (results || []).map((item, index) => <li key={index}> {item}</li>
</ul>

我还建议将您的 handleChange 函数（以及其他函数）转换为 useCallback 函数以减少不必要的更新。

【讨论】：

【解决方案2】：

假设 job 有一些 id、title 和 description：

 { results.map(( job, index ) => {
              return (
                <tr key={job.id}>
                  <td>{job.id}</td>
                  <td>{job.title}</td>
                  <td>{job.description}</td>
                </tr>
              );
    })}

或破坏：

{ results.map(({id, title, description}, index ) => {
                  return (
                    <tr key={id}>
                      <td>{id}</td>
                      <td>{jtitle}</td>
                      <td>{description}</td>
                    </tr>
                  );
        })}

【讨论】：

Find.js - 未捕获类型错误：results.map 不是函数