如何在 React 视图中显示来自对象数组的随机值

Question

我创建了一个 REST API 并在 useEffect 钩子中获取数据。 我将这些数据存储在称为帖子的状态中，并希望显示该状态中的随机值并在有人单击按钮时显示。 每次用户单击按钮时，我都希望它显示不同的值。 一切正常，直到我第二次单击该按钮，然后它弹出一个错误，说帖子未定义。 下面是整个组件。 我需要帮助消除该错误，因为我希望每次用户单击按钮时都会出现一个新帖子。

import React, { useEffect, useState } from "react";

import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const fetchingPosts = await fetch("http://localhost:5000/posts");
        const posts = await fetchingPosts.json();

        setPosts(posts);
      } catch (err) {
        console.log(err);
      }
    };
    fetchPosts();
  }, []);

  const handleClick = () => {
    const random = posts[Math.floor(Math.random() * posts.length)];
    setPosts(random);
  };
  console.log(posts);
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <span>{posts.quote}</span>
    </div>
  );
}

export default App;

Answer 1

您已经将 post 初始化为包含 n 个不同帖子的对象数组

将其值重新分配给handleClick内的一个帖子将导致posts失去其初始状态

所以只需创建另一个钩子，它最初是一个空字符串，每次点击后都会从数组posts获得一个不同的随机帖子！

像这样的东西：

import React, { useEffect, useState } from "react";

import "./App.css";

function App() {
  const [posts, setPosts] = useState([]);
  const [onePost, setOnePost] = useState(''); //one more hook for storing current random post

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const fetchingPosts = await fetch("http://localhost:5000/posts");
        const posts = await fetchingPosts.json();

        setPosts(posts);
      } catch (err) {
        console.log(err);
      }
    };
    fetchPosts();
  }, []);

  const handleClick = () => {
    const random = posts[Math.floor(Math.random() * posts.length)];
    setOnePost(random);//value assigned here
  };
  console.log(posts);
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <span>{onePost.quote}</span> //print onePost instead of Post
    </div>
  );
}

export default App;