如何更改显示数据？

Question

我从json文件中获取数据，因为里面有太多的数据，所以我不想全部展示。在页面中，我只想显示20个数据，当我单击NEXT按钮时，我想看到另外20个数据。它正在工作，但在过滤器函数中，它更新了filteredDatas，但没有更新showingDatas

import data from './data.json'
var i = 0
var j = 20

function App() {
const [showingDatas, setShowingDatas] = useState([])
const [filteredDatas, setFilteredDatas] = useState([])

const getDatas = () =>{
 setFilteredDatas(data)
 setShowingDatas(data.slice(0,20))
}

useEffect(()=>{
getDatas()
},[])

const next = () => { 
 i += 20;
 j += 20;
 setShowingDatas(filteredDatas.slice(i,j)) 
}

const filter = () => {
 setFilteredDatas(data.filter(item => item.productCompany ===  "Mavi"))
 i = 0
 j = 20
 setShowingDatas(filteredDatas.slice(0,20))
}

Answer 1

你不能这样做，因为React的工作原理。但是如果你想这样做，我建议你使用useEffect来保存filteredData更改，然后在useEffect中设置它。像这样：

useEffect(() => {
   setShowingDatas(filteredDatas)
},  [filteredDatas]);

如果你真的想使用useState，我建议你搜索useState with callback。