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跟踪。

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

因此，您可以使用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>
  );
};

Answer 2

这是因为您没有正确更新milestones。由于它们存储在Redux状态下，因此您需要添加和调度修改状态的操作。

我建议您看看Redux documentation。

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

2 个答案: