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

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 => {

  // 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 状态中，因此您需要添加和分派修改状态的操作。