访问嵌套的 JSON 并迭代 JS/React

Question

Please see sandbox below

https://codesandbox.io/embed/interesting-cloud-d7iff0?fontsize=14&hidenavigation=1&theme=dark

I'm making an API request to a database any pulling through job results. The data is nested quite significantly, please see example: https://gyazo.com/c91a633b588088ae1388a4bbba14554f

Within this, results is an array of all 10, which is not structured. Therefore, when it is listed to the console.log, it is like the following: https://gyazo.com/cf84ed56c9ba07e10d0a4fc0a894d545

Therefore, I am trying to iterate over these, and access for example, a specific ID of all 10 returned. I have a UseEffect Hook like this:

function reducer(state, action) {
    switch (action.type) {
      case ACTIONS.MAKE_REQUEST:
        return { loading: true, jobs: [] }
      case ACTIONS.GET_DATA:
        return { ...state, loading: false, jobs: action.payload.jobs.results}
      case ACTIONS.ERROR:
        return { ...state, loading: false, error: action.payload.error, jobs: [] }
      case ACTIONS.UPDATE_HAS_NEXT_PAGE:
        return { ...state, hasNextPage: action.payload.hasNextPage }
      default:
        return state
    }
  }
export default function useFetchJobs(params, page){

    //set initial state for reducer
    const [state, dispatch] = useReducer(reducer, {jobs: [], loading: true })

    //whenever params change, update here, array set to adjustable features
    useEffect(() => {
      //API canellations
      const cancelToken = axios.CancelToken.source()

        //updates state to load
        dispatch({ type: ACTIONS.MAKE_REQUEST})
        axios.get(BASE_URL, {
          cancelToken: cancelToken.token,
            //pass through params
            //hold all other params in spread
            params: {
                    what: 'Data Analyst',
                    where: 'Melbourne',  
                    ...params}
        }).then(res => {
            //using GET request, dispatch
            dispatch({ type: ACTIONS.GET_DATA, payload: {jobs: res.data}})
            

        }).catch(e=>{
            if (axios.isCancel(e)) return
            dispatch({ type: ACTIONS.ERROR, payload: {error: e} })
        })

        return () => {
          cancelToken.cancel()
        }



    }, [params, page])

    //type is set of data, payload recieved
    return state
}

However, despite this I can only access a specific key if i use [1]. For example if I did: return { ...state, loading: false, jobs: action.payload.jobs.results[1].title}

It does work, however I do not know how to map over this in my app to display them on the front end.

So how would you access each piece and map it over? Eg I assume I make a component and pass props, eg something like title, id, description, but I do not know how to access this.

Thanks

Answer 1

mapping in React (I do not fully understand what you asked. I made example with assuming this is what you wanted to know. You can search more about React Mapping here )

const exampleArray = [{name: "John",  age: "23" },{name: "Doe", age: "32"}, ... and more]

const YourComponent = (props)=> <div>
  <div>{props.item.name}</div>
  <div>{props.item.age}</div>
</div>

const MainComponent = ()=> {
  return (
    <div>
      // Never Forget your key when mapping
      {exampleArray.map((item,index)=> <YourComponent key={index} item={item} />)}
    </div>
  )
}