如何使用React Hooks从数组中选择随机对象？

Question

我不知道为什么我的功能不起作用。我不想从阵列中显示随机的citites？但是，如果我单击按钮然后显示错误“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

如果你想从你的数组中有一个随机城市，我会设计不同的应用程序，只需设置索引来选择。

此外，如果您使用胖箭头功能，则无需将城市传递给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 - Example

Answer 2

你的onClick处理程序只为你的方法提供一个参数 - event。所以你的城市在这里是不明确的：

let len = cities.length;

如果你想用onClick传递另一个参数，你应该使用箭头功能：

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