使用 React Hooks 更新和傳遞數據

Question

我正在通過const ARTICLES從index.js到App.js傳遞文章列表

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { applyPolyfills, defineCustomElements } from "h8k-components/loader";

const ARTICLES = [
  {
    title: "A message to our customers",
    upvotes: 12,
    date: "2020-01-24",
  },
  {
    title: "Alphabet earnings",
    upvotes: 22,
    date: "2019-11-23",
  },
  {
    title: "Artificial Mountains",
    upvotes: 2,
    date: "2019-11-22",
  },
  {
    title: "Scaling to 100k Users",
    upvotes: 72,
    date: "2019-01-21",
  },
  {
    title: "the Emu War",
    upvotes: 24,
    date: "2019-10-21",
  },
  {
    title: "What's SAP",
    upvotes: 1,
    date: "2019-11-21",
  },
  {
    title: "Simple text editor has 15k monthly users",
    upvotes: 7,
    date: "2010-12-31",
  },
];

ReactDOM.render(<App articles={ARTICLES} />, document.getElementById("root"));
registerServiceWorker();

applyPolyfills().then(() => {
  defineCustomElements(window);
});

然后，我使用 React Hooks 將相同的文章列表從App.js到components/Article.js App.js以在單擊相應按鈕時根據文章的upvotes和date屬性更新文章的順序。 但更新永遠不會發生。 當通過console.log單擊按鈕時，我可以看到articleList更改，但Article.js組件不會重新呈現這些更改。

import React, { useState } from "react";
import "./App.css";
import "h8k-components";

import Articles from "./components/Articles";

const title = "Sorting Articles";

function App({ articles }) {
  const [articleList, setArticle] = useState(articles);

  function onTopClicked() {
    setArticle(
      articleList.sort(function (a, b) {
        return b.upvotes - a.upvotes;
      })
    );
    console.log("top", articleList);
  }

  function onNewestClicked() {
    setArticle(
      articleList.sort(function (a, b) {
        let dateA = new Date(a.date);
        let dateB = new Date(b.date);
        return dateB - dateA;
      })
    );
    console.log("date", articleList);
  }

  return (
    <div className="App">
      <h8k-navbar header={title}></h8k-navbar>
      <div className="layout-row align-items-center justify-content-center my-20 navigation">
        <label className="form-hint mb-0 text-uppercase font-weight-light">
          Sort By
        </label>
        <button
          data-testid="most-upvoted-link"
          onClick={onTopClicked}
          className="small"
        >
          Most Upvoted
        </button>
        <button
          onClick={onNewestClicked}
          data-testid="most-recent-link"
          className="small"
        >
          Most Recent
        </button>
      </div>
      <Articles articles={articleList} />
    </div>
  );
}

export default App;

所述Article.js組件接收articleList通過它的數據props 。

import React from "react";

function Articles({ articles }) {
  return (
    <div className="card w-50 mx-auto">
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Upvotes</th>
            <th>Date</th>
          </tr>
        </thead>
        <tbody>
          {articles.map((article, i) => (
            <tr key={i} data-testid="article" key="article-index">
              <td data-testid="article-title">{article.title}</td>
              <td data-testid="article-upvotes">{article.upvotes}</td>
              <td data-testid="article-date">{article.date}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Articles;

為什么在單擊App.js中的按鈕時文章不會重新呈現articleList數據，以便我可以根據他們的upvotes和date屬性重新排序我的文章？

Answer 1

sort 函數不會創建返回新數組。 它就地排序並返回相同的數組。 所以引用還是一樣的，狀態沒有更新。

您應該復制已排序的數組並將其設置為新狀態

    setArticle(
      [...articleList.sort(function (a, b) {
        let dateA = new Date(a.date);
        let dateB = new Date(b.date);
        return dateB - dateA;
      })]
    );