Где разместить переменную в компоненте React?

Question

Ошибка: «Тип ошибки Объект (...) не является функцией»

Я пытаюсь отладить эту строку кода, которую я хочу перебрать, но она не работает:

{
    shuffleAndPick(images, 3).map((image) => (
        <div className="key" key={image.id}>
            <h3>{image.name}</h3>
            <h3>{image.sanskritname}</h3>
            <p>{image.description}</p>
            <img src={image.image} alt={image.name} />
        </div> 
    ))
}

Я хочу выполнить отладку, установив функцию shuffleAndPick () со значением в переменную. И затем console.log () переменная, чтобы увидеть, что я получаю. Другими словами, я хочу сделать что-то вроде этого:

const shuffledArray = shuffleAndPick(images, 3)
console.log(shuffledArray)

shuffleAndPick

const shuffleAndPick = (array, amount) => {
  return array.sort(() => 0.5 - Math.random()).slice(0, amount);
};

Моя проблема в том, что я не знаю, где в моем коде я должен поместить переменную и консоль .log. И я получаю только ошибки. Код, который я хочу отладить, выглядит следующим образом:

import React, { useState, useEffect, useParams } from 'react'
import { useHistory } from 'react-router-dom'
import { shuffleAndPick } from '../helpers/shuffleAndPick'

const URL = 'http://localhost:8080/chakra'

export const Energy = () => {
  const [images, setImages] = useState([]);
  const history = useHistory()

  const fetchSolarPlexus = () => {
    fetch('http://localhost:8080/chakra/5e6c096afe1b75409f5c6133/asana')
      .then (res => res.json())
      .then((json) => { 
        setImages(json)
      })
  } 

  useEffect(() => {
    fetchSolarPlexus()
  }, []);  


  return (
    <section className="WorkOut">
      <h2>Energy</h2>
      {shuffleAndPick(images, 3).map((image) => (
        <div className="key" key={image.id}>
        <h3>{image.name}</h3>
        <h3>{image.sanskritname}</h3>
        <p>{image.description}</p>
        <img src={image.image} alt={image.name} />
        </div> 
      ))}
      <button onClick={() => history.goBack()} className="backLink">
        Back
      </button>
    </section>
  )
}  

Где мне разместить переменную, которую я хочу в console.log?

Answer 1

Ответ на мой вопрос заключается в том, чтобы проверить переменную перед возвратом.

Я также получил много помощи в отладке.

Для получения дополнительной информации просмотрите комментарии.