一次仅显示3个对象

Question

我有一个报价生成器，我正在尝试实现一次显示特定数量对象的功能。我试过使用map，但它返回它不是一个函数。现在我可以生成一个随机报价，但我想有显示特定数字的选项。非常感谢您的帮助。是的，但我评论了一下，想试试这个地图。

App.js

import { useState, useEffect } from "react";
import Footer from "./Components/Footer/Footer";
import Quote from "./Components/Quote/Quote";
import "./App.css"
import { data } from "./Components/Data/Data";
import { characterData } from "./Components/Data/CharacterData"
import CharacterBios from "./Components/CharacterBios/CharacterBios";
import Header from "./Components/Header/Header";
function App() {
const [quote, setQuote] = useState();
const [isLoading, setIsLoading] = useState(true);
const randomise = () => {
const randomNumber = Math.floor(Math.random() * data.length);
setQuote(data[randomNumber]);
};
//math.floor makes it a whole number, and the equation above goes through the data at random
useEffect(() => {
randomise();
setIsLoading(false);
}, []);
return (
<div className="App">
<Header />
<div className="main">
<h1>Quote Generator</h1>
{isLoading ? <p>Quote now loading...</p> : <Quote data={quote} />}
<button onClick={randomise}>Generate Quote</button>
<CharacterBios characterData={characterData} />
<Footer />
</div>
</div>
);
}
export default App;

报价.jsx

import React from 'react'

const Quote = ({data}) => {
return (
<div className='container quote-section'>
<div className="row">
{data.slice(0).map((item,index)=> (
<div className="col-xl-4 col-lg-4 col-md-6 col-sm-12" key={index}> 

<div className="marked-content-card">
<p><span className="name">{item.name}</span></p>
<p>{item.quote}</p>
</div>
</div>
))}

</div>
{/* <blockquote> {
data.quote
}
<p>-{
data.name
}</p>
</blockquote> */}

</div>
)
}
export default Quote;

Answer 1

以下是您可以做的：

1. 使用一个数组作为引号状态
2. 随机化依据：
   • 克隆引号数组->tempData = [...data]
   • 创建一个数组以容纳要设置的引号->tempQuotes
   • 迭代您需要的引号数量，并：
     • splice()使用随机索引引用tempQuotes
     • push转换为tempQuotes
       • 排列...，因为splice返回一个数组
     • 使用tempData中的剩余引号再次迭代
3. 设置新报价状态
4. 贴图和渲染

代码沙盒

import { useState, useEffect } from "react";
const data = [
"Another one bites the dust",
"Sweet dreams are made of this",
"Never gonna give you up",
"Highway to the danger zone",
"Let the bodies hit the floor",
"Hey now, I'm an allstar",
"Hello darkness my old friend"
];
function App() {
const [quotes, setQuotes] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const numberOfQuotes = 3;
const randomise = () => {
const tempData = [...data];
const tempQuotes = [];
for (let i = 0; i < numberOfQuotes; i++) {
const randomNumber = Math.floor(Math.random() * tempData.length);
tempQuotes.push(...tempData.splice(randomNumber, 1));
}
setQuotes(tempQuotes);
};

useEffect(() => {
randomise();
setIsLoading(false);
}, []);
const quoteEls = quotes.map((quote) => <li class="quote">{quote}</li>);
return (
<div className="App">
<div className="main">
<h1>Quote Generator</h1>
{isLoading ? <p>Quote now loading...</p> : quoteEls}
<button onClick={randomise}>Generate Quote</button>
</div>
</div>
);
}
export default App;

如果data很大，并且您不想每次都将其克隆到内存中，则可以：

1. 使用Array.from()制作索引数组，即[0,1,2,3]
2. 像我们上面做的那样，随机地从中提取splice索引
3. map将该数组添加到您的数据

下面的函数只是为了演示，但如果决定这样做，它将很容易集成到您的代码中。

const data = [
"Another one bites the dust",
"Sweet dreams are made of this",
"Never gonna give you up",
"Highway to the danger zone",
"Let the bodies hit the floor",
"Hey now, I'm an allstar",
"Hello darkness my old friend"
];
const numberOfQuotes = 3
function randomize() {
const quoteIndices = []
const indices = Array.from({length: data.length}, (a,i) => i) // Make array of indices
for (let i = 0; i < numberOfQuotes; i++){
let randomNumber = Math.floor(Math.random() * indices.length);
quoteIndices.push(...indices.splice(randomNumber, 1))
}
return quoteIndices.map(index => data[index])
}
console.log(randomize())

Answer 2

是的，.map不是一个函数，因为根据您在Quote组件中的使用，数据数组包含对象，而您收到错误的原因是您正在从data数组中的值设置quote值。即CCD_ 19，因为CCD_。您需要修改randomise函数以在quote状态中存储多个随机引号：

const randomise = () => {
const indices = new Set()
const N = 3   // specifies number of random items
while(true){
const randomNumber = Math.floor(Math.random()*data.length)
indices.add(randomNumber)
if(indices.size>=N) break;
}
let quotesArr = []
for(i in indices){
quotesArr.push(data[i])
}

setQuote(quotesArr);
};

上面的代码一直生成随机数，直到你有了N个不同的随机数，一旦你有了这些随机数，你只需要在data中的这些索引中选择对象，然后设置引号。

然后，您还必须更新您的退货声明，特别是您使用Quote component:的部分

<>{quote.map(q => <Quote data={q} />)}</>