React js.使用useHooks useState来显示数组元素的多显示少

Question

我有点新鲜的反应和使用estate钩子(仍在学习)。我想用Array和React钩子创建show more/less按钮。我遇到了这个代码与确切的结果，我想实现-显示数组的一部分，然后显示其余的/返回到以前的状态。

问题是，代码是使用类组件编写的。我从来没有学过它们，useState是最近才出现的。

如何实现这样的东西，但使用状态钩子(useEffect?)如果它是可能的?

https://jsbin.com/wowaluwipu/1/edit?html、js、输出

class Application extends React.Component {
constructor() {
super()   
this.state = {
cars: [
{ "name" : "Audi", "country" : "Germany"},
{ "name" : "BMW", "country" : "Germany" },
{ "name" : "Chevrolet", "country" : "USA" },
{ "name" : "Citroen", "country" : "France" },
{ "name" : "Hyundai", "country" : "South Korea" },
{ "name" : "Mercedes-Benz", "country" : "Germany" },
{ "name" : "Renault", "country" : "France" },
{ "name" : "Seat", "country" : "Spain" },
],
itemsToShow: 3,
expanded: false
}
this.showMore = this.showMore.bind(this);
}

showMore() {
this.state.itemsToShow === 3 ? (
this.setState({ itemsToShow: this.state.cars.length, expanded: true })
) : (
this.setState({ itemsToShow: 3, expanded: false })
)
}

render() {
return <div className="container">
<h3>Click show more to see more data</h3>
<div className="row">
<h3>List of Cars</h3>
<ul>
{this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => 
<li key={i}>{car.name} - {car.country}</li>
)}
</ul>
</div>

Answer 1

无论哪种方式，我的工作和其他的一样好。只是方式有点不同。

import React, { useState } from 'react'
function Stacks() {
const [itemsToShow, setItemsToShow] = useState(3);
const cars = [
{ "name" : "Audi", "country" : "Germany"},
{ "name" : "BMW", "country" : "Germany" },
{ "name" : "Chevrolet", "country" : "USA" },
{ "name" : "Citroen", "country" : "France" },
{ "name" : "Hyundai", "country" : "South Korea" },
{ "name" : "Mercedes-Benz", "country" : "Germany" },
{ "name" : "Renault", "country" : "France" },
{ "name" : "Seat", "country" : "Spain" },
];
const showmore = () => {
setItemsToShow(cars.length)
}
const showless = () => {
setItemsToShow(3)
}
return (
<div>
{cars.slice(0, itemsToShow).map((car, index) => <li key={index}>{car.name} - {car.country} </li>)}
{(itemsToShow === 3) ? <button onClick={showmore}>Show More</button>: <button onClick={showless}>Show Less</button>}
</div>
)
}

可能不是有效的方式，唯一的区别是我从show more中取出了在线代码，并制作了一个单独的函数show less，该函数重置了原始状态值3。

我有同样的问题，当我刚开始在React，我通常在教程中看到类组件。

Answer 2

你好，我有同样的问题，但感谢别人的帮助，它是更加清晰(我不测试它是否工作，但应该是它)

import { useState } from "react";
function App() {
// const [state, setstate] = useState(initialState) // this is how it initially is
const [data, setData] = useState({
cars: [
{ name: "Audi", country: "Germany" },
{ name: "BMW", country: "Germany" },
{ name: "Chevrolet", country: "USA" },
{ name: "Citroen", country: "France" },
{ name: "Hyundai", country: "South Korea" },
{ name: "Mercedes-Benz", country: "Germany" },
{ name: "Renault", country: "France" },
{ name: "Seat", country: "Spain" },
],
itemsToShow: 3,
}); // i named it data youcan name it whatever suits you
const showMore = () => {
data.itemsToShow === 3
? // ...data is a spread of the state, that means have all the data and change that
// particular one, in that case  "itemsToShow"
setData({ ...data, itemsToShow: data.cars.length })
: setData({ itemsToShow: 3 });
};
return (
<div className="container">
<h3>Click show more to see more data</h3>
<div className="row">
<h3>List of Cars</h3>
<ul>
{data.cars.slice(0, data.itemsToShow).map((car, i) => (
<li key={i}>
{car.name} - {car.country}
</li>
))}
</ul>
</div>
// if the items you want to show are equal to the legth of your car list
then hide the button
{data.itemsToShow < data.cars.length && (
<button onClick={showMore}>Show more</button>
)}
</div>
);
}
export default App;

一般会去掉&;this&;this.state&;，而不是&;this. setstate &;你可以直接像setNewThings"或者setcrazystuff之类的

多练习你就会掌握窍门，希望对你有帮助。