我怎样才能用usestate反转数组的顺序

Question

我已连接到一个 api 并将一些数据提取到我的名为 'data' 的项目中。此数据正在动态呈现到卡片组件中。我现在正尝试通过使用 useState 单击按钮来反转这些卡片的顺序，但无法弄清楚。以下是我目前所拥有的：

import React, { useState } from 'react'
import './App.scss'
import { useQuery } from '@apollo/react-hooks'
import GET_PRODUCTS_IN_COLLECTION from './gql/getCollection'
import ProductCard from './components/ProductCard/ProductCard'

const App = (props) =>  {

  const {data, loading, error} = useQuery(GET_PRODUCTS_IN_COLLECTION, {
    variables: {
      count: 10,
      handle: 'skateboard'
    }
  })

  const [reverseData, setReverseData] = useState(data)

  const reverseOrder = () => {
    let newArray = reverseData.slice().reverse()
    setReverseData(newArray)
  }
  

  if(loading) {
    // Data is still loading....
    return (<div className="App">Loading....</div>)
  }

  return (
    <div className="App">
      <header className="App-header">
      </header>
      <main>
        
        <div className="buttonGroup">{reverseData.join(", ")}
          <button onClick={reverseOrder}>Reverse Product Order</button>
          <button>Price High to Low</button>
          <button>Price Low to High</button>
          <button>Display 9 products</button>
          <p>{reverseData}</p>
        </div>

        {/* 
          Your render components go here
        */} 

        <div className="ProductList">
           {data.collectionByHandle.products.edges.map(product => {
             return (<ProductCard productData={product} />)
           })}
        </div>
      </main>
    </div>
  )
}

export default App

谁能告诉我哪里错了。

Answer 1

.reverse() 改变数组，你不应该直接改变 useState 值。取而代之的是，您需要创建新值：

  const reverseOrder = () => {
    let newArray = [...reverseData]
    newArrray.reverse()
    setReverseData(newArray)
  }

因此，您从状态创建一个新数组，对其进行变异并分配给状态

Answer 2

您不需要将通过useQuery 获取的数据存储在状态中。只需存储反转状态，并使用它来操纵渲染。如果反转状态为真，请在渲染前使用 .slice().reverse() 反转数组。

const [reversed, setReversed] = useState(false)

const reverseOrder = () => {
  setReversed(!reversed)
}

return (
// ...
    <div className="ProductList">
      {reversed
        ? data.collectionByHandle.products.edges
            .slice()
            .reverse()
            .map((product) => {
              return <ProductCard productData={product} />;
            })
        : data.collectionByHandle.products.edges.map((product) => {
            return <ProductCard productData={product} />;
          })}
    </div>
// ...
)

这里的关键是反转数组。在您的情况下，“边缘” 属性似乎是数组。因为reverse原地改变数组，所以我们使用slice创建一个副本然后reverse，以防止原始数组被改变。

我怎样才能用usestate反转数组的顺序

how can i reverse the order of an array with usestate

arrays

function

reactjs

use-state