Question

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

2019-04-09

5402

arrays reactjs random react-hooks

我不知道为什么我的函数不起作用。我不想显示数组中的随机元素？但如果我点击按钮然后显示

错误 -:

AppHooks.js:15 Uncaught 
TypeError: Cannot read property 'length' of undefined.`

我做错了什么？

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

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

此外，如果您使用的是粗箭头函数，则无需将城市传递给点击事件处理程序。我为您创建了一个小例子。

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 - 示例

Answer 2

您的 onClick 处理程序只为您的方法提供一个参数 - 事件。因此您的城市在这里未定义：

let len = cities.length;

如果您想通过 onClick 传递另一个参数，您应该使用箭头函数：

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