сортировка массива с помощью хуков - PullRequest
Новая
       1

сортировка массива с помощью хуков

1 голос
/ 24 сентября 2019

Я делаю простой вид массива с реагирующими хуками, но его состояние не обновляется.Кто-нибудь может указать, что я собираюсь здесь? 

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];

function App() {
  const [dogList, setDogList] = useState(dogs);

  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
    alert(sorted[0].name);
  };

  return (
    <div>
      {dogs.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ответы [ 2 ]

3 голосов
/ 24 сентября 2019

Первое: поскольку Array.prototype.sort() на месте, клонируйте перед сортировкой: 

const sorted = [...dogList].sort((a, b) => {
  return b.age - a.age;
});

Без этого обнаружение изменений не обнаружит измененный массив.

Вы называете карту на dogs.Исправление: 

  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <div onClick={sortByAge}>sort by age</div>
    </div>
  );

Демонстрация: https://jsfiddle.net/acdcjunior/kpwb8sq2/1/

0 голосов
/ 25 сентября 2019 

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
class Application extends React.Component {
  state = {dogList: dogs};

  sortByAge = () => {
    const sorted = this.state.dogList.sort((a, b) => {
      return b.age - a.age;
    });
    this.setState({dogList: sorted});
  };

  render() {
    return (
      <div>
        {this.state.dogList.map((dog, i) => {
          return <p key={i}>{dog.name}</p>;
        })}
        <button onClick={this.sortByAge}>sort by age</button>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="root"></div>

Этот код использует крючки 

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const dogs = [{ name: "fido", age: 22 }, { name: "will", age: 50 }];
function Application() {
  const [dogList, setDogList] = useState(dogs);
  const sortByAge = () => {
    const sorted = dogList.sort((a, b) => {
      return b.age - a.age;
    });
    setDogList(sorted);
  };
  return (
    <div>
      {dogList.map((dog, i) => {
        return <p key={i}>{dog.name}</p>;
      })}
      <button onClick={sortByAge}>sort by age</button>
    </div>
  );
}

ReactDOM.render(<Application />, document.getElementById('root'));
...