Подскажите, в чем может быть проблема в теме вопроса? Хотя самому кажется, что проблема в 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;
sortPosts
?a[selectedSort]
возвращаетundefined
, потому что в элементахposts
нет свойств с именем хранящимся в переменнойselectedSort
selectedSort