Как выбрать случайный объект из массива с помощью React Hooks?

Question

Я не знаю, почему моя функция не работает.Я не хочу отображать случайные цититы из массива?Но если я нажму кнопку, то покажу мне ошибку "AppHooks.js: 15 Uncaught TypeError: Невозможно прочитать свойство 'длина' из неопределенного".

Что я делаю неправильно?

import React, {useState} from 'react';


export default function AppHooks () {
    const [cities, setCities] = useState([
        {
            nameCity: 'Kraków'
        },
        {
            nameCity: "Kielce"
        }
    ])

    function randomCities (e, cities) {
        let len = cities.length;
        // let randCiti = cities[Math.floor(Math.random() * cities.length)];
        setCities(cities[Math.floor(Math.random() * len)]);
        return cities
    }
    let citi = cities.map((cit, i) => {
        return(
        <div key={i}>
            {cit.nameCity}
        </div>)
        }
    )

    console.log(cities[0]);
    return(
        <div>
            {citi}
            <button onClick={randomCities}> Change</button>
        </div>

    )
}

Answer 1

Ваш обработчик onClick предоставляет вашему методу только один параметр - событие.Таким образом, ваши города здесь не определены:

let len = cities.length;

Если вы хотите передать другой параметр с помощью onClick, используйте функцию стрелки:

onClick={event => randomCities(event, cities)}

Answer 2

Если вы хотите, чтобы в вашем массиве был случайный город, я бы разработал приложение по-другому и просто установил индекс на выбор.

Также, если вы используете функции жирной стрелки, нет необходимости передавать города обработчику событий click. Я создал небольшой пример для вас.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function AppHooks() {
  const cities = [
    {
      nameCity: "Kraków"
    },
    {
      nameCity: "Kielce"
    }
  ];

  const [activeCity, setActiveCity] = useState(0);

  const randomCities = e => {
    const len = cities.length;
    setActiveCity(Math.floor(Math.random() * len));
  };

  return (
    <>
      <div>{cities[activeCity].nameCity}</div>
      <button onClick={randomCities}> Change</button>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AppHooks />, rootElement);

CodeSandbox - Пример