0

Подскажите, в чем может быть проблема в теме вопроса? Хотя самому кажется, что проблема в selectedSort, а именно в ней находится пустая строка(до нажатия одного из option), поэтому функция пытается вызваться у пустой строки, и выходит undefined. Проверку осуществил, но так же не работает. В чем дело? Вот исходники App.js и MySelect.jsx:

App.js

import React, {useMemo, useState} from 'react';
import './Styles/App.css';
import PostList from './components/PostList';
import PostForm from './components/PostForm';
import MySelect from './UI/select/MySelect';
import MyInput from './UI/input/MyInput';

function App() {
  const [posts, setPosts] = useState([
    {id: 1, value: "First React 1", desc: "New Description"},
    {id: 2, value: "Second React 2", desc: "Old Description"},
    {id: 3, value: "Third React 3", desc: "Brand new Description"}
  ])

  const [selectedSort, setSelectedSort] = useState('');
  const [searchQuery, setSearchQuery] = useState('');

  const createPost = (newPost) => {
    setPosts([...posts, newPost]);
  }

  const removePost = (post) => {
    setPosts(posts.filter(p => p.id !== post.id));
  }

  const sortPosts = (sort) => {
    setSelectedSort(sort);
  }

  const sortedPosts = useMemo(() => {
    console.log(selectedSort)
    if(selectedSort) {
      return [...posts].sort((a, b) => a[selectedSort].localeCompare(b[selectedSort]));
    }
    return posts;
  }, [selectedSort, posts]);
  
  return (
    <div className="App">
      <PostForm create={createPost}/>

      <hr style={{margin: '10px 0'}} />

      <MyInput 
        value={searchQuery} 
        placeholder="Поиск..."
        onChange={e => setSearchQuery(e.target.value)}
      />

      <MySelect
        value={selectedSort} 
        onChange={sortPosts} 
        defaultValue="Сортировать" 
        options={[
          {title: "title", body: "По названию"},
          {title: "body", body: "По описанию"}
        ]}
      />

      {posts.length !== 0
        ? <PostList remove={removePost} posts={sortedPosts}/>
        : <h1 style={{fontFamily: 'Arial', textAlign: 'center', margin: '15px 0'}}>Посты не найдены</h1>
      }
    </div>
  );
}

export default App;



MySelect.jsx

import React from 'react';

const MySelect = ({options, defaultValue, value, onChange}) => {
    return (
        <select 
            style={{margin: '15px 0'}} 
            value={value} 
            onChange={event => onChange(event.target.value)}
        >
            <option disabled value="">{defaultValue}</option>
            {options.map(option => 
                <option key={option.title} value={option.title}>
                    {option.body}
                </option>
            )}
        </select>
    );
};

export default MySelect;
6
  • где вызывается sortPosts?
    – Grundy
    Commented 26 июн. 2022 в 12:45
  • очевидно, что a[selectedSort] возвращает undefined, потому что в элементах posts нет свойств с именем хранящимся в переменной selectedSort
    – Grundy
    Commented 26 июн. 2022 в 12:48
  • @Grundy Можете пожалуйста сказать, что делать в такой ситуации? А то я уже который день не могу решить это Commented 26 июн. 2022 в 13:02
  • задать правильные значения, которые может принимать selectedSort
    – Grundy
    Commented 26 июн. 2022 в 16:50
  • @Grundy Хорошо, спасибо Commented 26 июн. 2022 в 18:48

1 ответ 1

1

У вас есть набор постов - массив posts, где у каждого поста есть поля id, value и desc. Чтобы провести сортировку, нужно выбрать по какому из этих полей будет проведена сортировка.

В качестве вариантов сортировки вы передаете title из следующего набора

      {title: "title", body: "По названию"},
      {title: "body", body: "По описанию"}

то есть title и body, чтобы сортировка работала, попробуйте заменить код выше на

      {title: "value", body: "По названию"},
      {title: "desc", body: "По описанию"}
1
  • Спасибо за решение, и прошу прощение за долгое ожидание Commented 19 июл. 2022 в 13:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.