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

Question

I have milestoneCards. I want to add a sort button, that upon clicking this button the cards will be sorted by the card heading. The sort takes place, but it does not re-render the list in the sorted order.

please advise. thank you so much for helping me here.

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

It's because you need to have sortClicked to be tracked by React.

When let sortClicked = false is declared inside MyMilestones component, it's declared once on the first component mount and won't be updated when the component is re-rendered.

So you can save sortClicked in a state using React.useState and update it onClick . useState is a one-off way of storing this.state value for Class Component but for one state. (I won't get into it too deep as React documentation has a thorough coverage on 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

It's because you're not updating the milestones correctly. Since they're stored on Redux state, you need to add and dispatch the action that modifies the state.

I recommend you look at the Redux documentation .