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

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组件内部声明时，它在第一次组件挂载时声明一次，并且不会在组件重新渲染时更新。所以你可以sortClicked使用React.useState保存状态并更新它onClick。 useState是一种一次性存储this.state类组件值的方式，但只存储一种状态。（我不会太深入，因为 React 文档对Introducing Hooks 进行了全面的介绍）const MyMilestones = props => {&nbsp; // let sortClicked = false;&nbsp; // Initialize it to "false" by default.&nbsp; let [sortClicked, setSortClicked] = React.useState(false)&nbsp; let milestoneCards = ...;&nbsp; const sortedMilestoneCards = ...;&nbsp; return (&nbsp; &nbsp; <div className="MilestoneCards">&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; <Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CardTitle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>My Milestones</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardTitle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Notify "React" to re-render.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setSortClicked(true)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // No need to return a new reference here.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sort&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>{/*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 👇 Note that {} is wrapped around the whole block. */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {sortClicked ? sortedMilestoneCards : milestoneCards}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </CardBody>&nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div>&nbsp; );};

Answer 2

那是因为你没有milestones正确更新。由于它们存储在 Redux 状态中，因此您需要添加和分派修改状态的操作。