javascript - 单击排序按钮后数据不会重新呈现

Question

我有里程碑卡。我想添加一个排序按钮，单击此按钮后，卡片将按卡片标题排序。进行排序，但不会按排序顺序重新呈现列表。

请指教。非常感谢您在这里帮助我。

import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { Card, CardBody, CardTitle } from "reactstrap";

const MyMilestones = props => {
  let sortClicked = false;

  let milestoneCards =
    props.milestones.length > 0
      ? props.milestones.map(m => (
          <p key={m.id}>
            <Link to={`/milestones/${m.id}`}>{m.attributes.heading}</Link>
          </p>
        ))
      : null;

  const sortedMilestoneCards = [...props.milestones]
    .sort((a, b) => (a.attributes.heading > b.attributes.heading ? 1 : -1))
    .map(m => (
      <p key={m.id}>
        <Link to={`/milestones/${m.id}`}>{m.attributes.heading}</Link>
      </p>
    ));

  return (
    <div className="MilestoneCards">
      {
        <Card>
          <CardBody>
            <CardTitle>
              <h4>My Milestones</h4>
            </CardTitle>
            <button
              onClick={() => {
                sortClicked = true;
                console.log("before", milestoneCards);
                milestoneCards = sortedMilestoneCards;
                console.log("after", milestoneCards);
                return (milestoneCards = sortedMilestoneCards);
              }}
            >
              Sort
            </button>
            sortClicked ? ({sortedMilestoneCards}) : {milestoneCards}
          </CardBody>
        </Card>
      }
    </div>
  );
};

const mapStateToProps = state => {
  return {
    milestones: state.myMilestones
  };
};

export default connect(mapStateToProps)(MyMilestones);

Answer 1

这是因为你需要让 sortClicked 被 React 跟踪。

当在 MyMilestones 组件内声明 let sortClicked = false 时，它会在第一个组件挂载时声明一次，并且在重新渲染组件时不会更新。

因此，您可以使用 React.useState 将 sortClicked 保存在状态中并更新它onClick。 useState 是一种为类组件存储一个状态的 this.state 值的一次性方法。 (我不会深入讨论，因为 React 文档对 Introducing Hooks 进行了全面的介绍)

const MyMilestones = props => {
  // let sortClicked = false;
  // Initialize it to "false" by default.
  let [sortClicked, setSortClicked] = React.useState(false)

  let milestoneCards = ...;
  const sortedMilestoneCards = ...;

  return (
    <div className="MilestoneCards">
      {
        <Card>
          <CardBody>
            <CardTitle>
              <h4>My Milestones</h4>
            </CardTitle>
            <button
              onClick={() => {
                // Notify "React" to re-render.
                setSortClicked(true)
                // No need to return a new reference here.
              }}
            >
              Sort
            </button>
{/*              👇 Note that {} is wrapped around the whole block. */}
            {sortClicked ? sortedMilestoneCards : milestoneCards}
          </CardBody>
        </Card>
      }
    </div>
  );
};