Блог

Я получаю «Не удается прочитать свойство «карта» неопределенного (это относится к tradeData) из TradeDataList.js досье. Я вызываю API, который вызывается через поисковый запрос, который передается в функцию get «unirest». У меня есть настроенный контекстный API, передающий некоторые централизованные значения в различные другие файлы. Я настроил его как массив в useState. Я теряю голову из-за этого, если кто-нибудь может помочь, пожалуйста. У меня есть следующие файлы:

context.js

 import React, { useState, useContext, useEffect } from 'react'
import { useCallback } from 'react'
var unirest = require('unirest');

const url = 'https://api.someurl.com/oauth/client_credential/accesstoken' ;
const Browse_URL = 'https://api.someurl.com/tradesregister/v1/browse' ;

const MY_API_KEY = 'EpVhCPGX4lzMwzdXVKG7yYFubGtwmlYU4343434';

const Authorization = 'Basic RXBWaENQR1g0bHpNd3pkWFZLRzd5WUZ1Ykd0d21sWVU6M2NvcEVuQTVEZlJXZ3BSYw==' ;

const AppContext = React.createContext()

const AppProvider = ({ children }) => {

    const [token, setToken] = useState('') ;
    const [loading, setLoading] = useState(true) ;
    const [tradeData, setTradeData] = useState([]) ;
    const [searchTerm, setSearchTerm] = useState('')
 
    const getToken = () => {
      unirest.get(url)
        .header({'Accept': 'application/json', 'authorization': Authorization})
        .query({"grant_type": "client_credentials"})
        .end(function (response) {
          const token = response.body["access_token"] ;
          //console.log(token) ;
          setToken(token)   
        })
  }


useEffect (() => {
  // call the getToken function
  getToken() ;
  
}, [])

//Get the new token to access trade data
const newAuth = 'Bearer '   token 

    return (
        <AppContext.Provider
          value={{ token,
                   MY_API_KEY,
                   newAuth,
                   Browse_URL,
                   loading,
                   setTradeData,
                   tradeData,
                   setLoading,
                   searchTerm,
                   setSearchTerm 
                  }}
               
        >
          {children}
        </AppContext.Provider>
      )
  }


export const useGlobalContext = () => {
    return useContext(AppContext)
  }
  
  export { AppContext, AppProvider }

 

SearchForm.js (звонок начинается отсюда )

 import React, { useEffect, useState } from 'react'
import { useGlobalContext } from '../context'
import TradeDataList from './TradeDataList'
//import Loading from './Loading'
var unirest = require('unirest');

const SearchForm = () => {
  const {searchTerm, setSearchTerm,loading, setLoading, tradeData, setTradeData, MY_API_KEY, newAuth, Browse_URL } = useGlobalContext();
  //const [tradeData, setTradeData] = useState([]) ;

  const getTrade = () => {
    setLoading(true)
    unirest.get(Browse_URL)
     .header({'Accept': 'application/json', 'authorization': newAuth, "apikey": MY_API_KEY })
     .query({"searchText": searchTerm })
     .end(function (response) {
        const tradeData = response.body ;
        //console.log(tradeData) ;
        setTradeData(tradeData)
        setLoading(false);
      })
  }
  
  useEffect (() => {
    // call the getTrade function
    getTrade() ;
  }, [])

 const handleSubmit = (e) => {
   e.preventDefault() ;
   getTrade() ;
  }
 
  console.log('here is the data' ,tradeData)

  return (
    <section className="section-search">
      <form className="search-form" onSubmit={handleSubmit}>
        <div className="form-control">
          <label htmlFor='searchTerm'> search trade licence info</label>
           <input 
             type='text' 
             id='searchTerm' 
             //ref={searchValue} //reference
             value={searchTerm}
             //onChange={searchTrade}
             onChange={(e) => setSearchTerm(e.target.value)}
             />
        </div>
        <button type="submit">Submit</button>
      </form>
      
      <div className="cocktails-center">
           <TradeDataList tradeData={tradeData} />
      </div>
      
    </section>
     
  )
}


export default SearchForm

 

TradeList.js

 import React from 'react'
import TradeData from './TradeData'
//import Loading from './Loading'
//import { useGlobalContext } from '../context'

/**
 * This page displays TradeData and loading
 */

const TradeDataList = ({ tradeData }) => {
   

  //display loading while cocktails are being loaded
  
  return (
    <section className="section">
      <h2 className="section-title">
       Trade Data
      </h2>
      {/* <h2>cocktail list</h2> */}
      <div className="cocktails-center">
        {tradeData.map((trade) => {
           // this is to be handled by Cocktail component
            return <TradeData key={trade.licenceID} {...trade} />
        })}

      </div>
    </section>
  )
}

export default TradeDataList

 

TradeData.js

 import React from 'react'
import { Link } from 'react-router-dom'

//image,name,id,info,glass
const TradeData = ({
    licenceID, 
    licensee, 
    licenceName,
    licenceNumber,
    licenceType,
    status, 
    suburb, 
    postcode,   
    businessNames,  
    categories, 
    classes 
   }) => {

  return (
    <article className="cocktail">
      <div className="img-container">
         <h1>This is header </h1>
      </div>
      <div className="cocktail-footer">
        <h3>{licenceID}</h3>
        <p>{licensee}</p>
        <h4>{licenceName}</h4>
        <p>{licenceType}</p>
        {/* <Link to={`/cocktail/${id}`} className="btn btn-primary
           btn-details">details</Link> */}
      </div>
    </article>
  )
}

export default TradeData

 

Внутри вашего TradeList.js вам просто нужно добавить условие проверки:

 <div className="cocktails-center">
        {tradeData?tradeData.map((trade) => {
           // this is to be handled by Cocktail component
            return <TradeData key={trade.licenceID} {...trade} />
        }):null}

      </div>
 

Другое альтернативное решение

  { tradeData amp;amp; tradeData.map((trade) => {
           // this is to be handled by Cocktail component
            return <TradeData key={trade.licenceID} {...trade} />
        })}
 

Примечание: .map Функция доступна только в массиве.
Если данные не в том формате, который вы ожидаете (это {} так, но вы ожидаете [] ).