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
    26 июн 2022 в 12:45
  • очевидно, что a[selectedSort] возвращает undefined, потому что в элементах posts нет свойств с именем хранящимся в переменной selectedSort
    – Grundy
    26 июн 2022 в 12:48
  • @Grundy Можете пожалуйста сказать, что делать в такой ситуации? А то я уже который день не могу решить это 26 июн 2022 в 13:02
  • задать правильные значения, которые может принимать selectedSort
    – Grundy
    26 июн 2022 в 16:50
  • @Grundy Хорошо, спасибо 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
  • Спасибо за решение, и прошу прощение за долгое ожидание 19 июл 2022 в 13:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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