时间戳

首页 > 解决方案 > 如何遍历 Axios 对 React 中表的响应

reactjs - 如何遍历 Axios 对 React 中表的响应

问题描述

我正在尝试开发一个小型项目，以检索 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;

标签： reactjsaxiosreact-hooks

解决方案

嗨，你可以做这样的事情。

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

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

推荐阅读