Я пытаюсь выполнить сортировку локального json файла в React js, но получаю ошибку: «Ошибка типа: _Data_place_json__WEBPACK_IMPORTED_MODULE_1__ не повторяется».

Question

Я пытаюсь выполнить сортировку локального json файла в React js, но получаю ошибку:

TypeError: _Data_place_json__WEBPACK_IMPORTED_MODULE_1__ не повторяется.

Я пытаюсь отсортировать мои локальные данные по "заголовку" в алфавитном порядке. Но я получаю ошибку. Я не знаю, что я делаю неправильно.

Это мой json файл

{
    "users": [{
            "userId": 1,
            "id": 1,
            "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
            "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
        },
        {
            "userId": 1,
            "id": 2,
            "title": "qui est esse",
            "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
        },
        {
            "userId": 1,
            "id": 3,
            "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
            "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
        },
        {
            "userId": 1,
            "id": 4,
            "title": "eum et est occaecati",
            "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
        }
    ]
}

Это мой дочерний компонент React, где я пытаюсь отсортировать.

import React, { Component } from "react";
import place from "./Data/place.json";

export class Restaurent extends Component {
  state = {
    place: place
  };

  sortName(search) {
    this.setState({
      place: [...place].sort((a, b) => a[search] < b[search])
    });
  }
  render() {
    return (
      <React.Fragment>
        <button onClick={() => this.sortName("name")}>sort</button>
        {place.users.map(name => {
          return <li>{name.title}</li>;
        })}
      </React.Fragment>
    );
  }
}

export default Restaurent;

Это файл моего приложения

import React from "react";

import "./App.css";
import Restaurent from "./components/Restaurent";

function App() {
  return (
    <div className="App">
      <Restaurent />
    </div>
  );
}

export default App;

Answer 1

Продолжение из раздела комментариев

places - это объект, поэтому вы не можете использовать оператор распространения для его копирования в array, как [...places] ({...places} - это допустимо, хотя). Вам нужно написать [...places.users], потому что places.users является массивом и может быть повторен для копирования.

Кроме того, вы сказали, что хотите отсортировать, используя "title", но вы передаете "name" в

<button onClick={() => this.sortName("name")}>sort</button>

---

Исправление : выполните следующие изменения в своем коде

sortName(search) {
    this.setState({
        place: [...place.users].sort((a, b) => {
            if(a[search] < b[search]) // Put a first
                return -1;
            if(a[search] > b[search]) // Put b first
                return 1;
            return 0;
        })
    });
}

и

<button onClick={() => this.sortName("title")}>sort</button>

---

ОБНОВЛЕНИЕ

На самом деле существует множество других ошибок в Restaurent.js. Вот список некоторых из них:

1. state не определен внутри конструктора.
2. Внутри render(), вы получаете доступ к place непосредственно из импортированного JSON файл, а не из состояния, и, следовательно, вы не увидите никаких изменений даже после сортировки.
3. Вы должны передать key реквизит каждому ребенку в map().

Вот правильный и работающий (проверенный) Restaurent.js компонент:

export class Restaurent extends Component {
    constructor(){
        super();
        this.state = {
            place: place
        };
    }
    sortName(search) {
        let sortedUsers = [...place.users].sort((a, b) => {
            if(a[search] < b[search]) // Put a first
                return -1;
            if(a[search] > b[search]) // Put b first
                return 1;
            return 0;
        });
        this.setState({
            place: {
                ...this.state.place,
                users: sortedUsers
            }
        });
    }
    render() {
        return (
            <React.Fragment>
                <button onClick={() => this.sortName("title")}>sort</button>
                {this.state.place.users.map((name,index) => {
                    return <li key={index}>{name.title}</li>;
                })}
            </React.Fragment>
        );
    }
}