1

уважаемые разработчики. Я новичок в React.js и поэтому некоторые ошибки для меня очень не понятны. У меня есть массив объектов созданный с помощью хука useState. Этот массив это "посты людей", которые я хочу сортировать по названию или содержанию(первой букве). Сортировка происходит в зависимости от значения select. Не буду долго всё описывать, думаю вы поймёте мой простой код) Любая помощь будет очень полезна:)

Файл TwoPostSort.js

import React, { useState } from 'react';

const TwoPostSort = ({ options, defaultSort, createSort}) => {

    const [ValueSort, setValueSort] = useState('');
    
    const SortNeW = () => {
        const NewSort = [ValueSort].reduce(function(a, b){
            return a + b;
        });
    
        createSort(NewSort);
    
        console.log(NewSort);
    }

    return (
        <div style={{ margin: '5px 0px 30px 0px' }}>
            <select 
            value={ValueSort}
            onChange={e => setValueSort(e.target.value)}
            onChange={SortNeW}
            >
                <option disabled value="">{defaultSort}</option>
                {options.map(option =>
                    <option key={option.toString()} value={option.value}>
                        {option.name}
                    </option>
                )}
            </select>
        </div>
    );

};

export default TwoPostSort;

Файл App.js

import React, { useRef, useState } from "react";
import TwoPostSort from "./components/TwoPostSort";

function App() {
  const [postu, setPostu] = useState([
    { id: 10, title: "Aa", body: "12" },
    { id: 11, title: "aA", body: "13" },
    { id: 12, title: "bb", body: "11" },
  ]);

  const [selectorSort, setselectorSort] = useState("");

  const CreateNewSort = (NewSort) => {
    setselectorSort(NewSort);
    console.log(NewSort);
    setPostu([...postu].sort((a, b) => a[NewSort].localeCompare(b[NewSort])));
  };

  return (
    <div className="App">

      <TwoPostSort
        value={selectorSort}
        createSort={CreateNewSort}
        defaultSort="Сортировка"
        options={[
          { value: "title", name: "По названию" },
          { value: "body", name: "По описанию" },
        ]}
      />

      
      {postu.length !== 0 ? (
        <PostList postuu={postu}/>
      ) : (
        <div>
          <h1 style={{ textAlign: "center", color: "green" }}>
            Посты не найдены
          </h1>
        </div>
      )}

    </div>
  );
}

export default App;

Файл PostList.js

import React, { useState } from 'react';
import MyButton from './Form/MyButton';


const PostList = ({ postuu, remove }) => {

    return (
        <ul>
            {postuu.map(post => <PostItem id={post.id} title={post.title} body={post.body} key={post.toString()} remove={remove} post={post} />)}
        </ul>
    );
}


const PostItem = (props) => {

    return (
        <div className="post">
            <div className="post__content">
                <strong>{props.id}</strong><br />
                <span>{props.title}{props.body}</span>
            </div>
            <div className="post__btn">
                <MyButton
                    onClick={() => props.remove(props.post)}>
                    Удалить
                </MyButton>
            </div>
        </div>
    );
}

export default PostList;
1
  • Вы не смотрели что именно приходит пропс createSort? Попробуйте createSort={CreateNewSort}, заменить на CreateNewSort={CreateNewSort} и в пропсах соответственно. Собственно в ошибке же написано, что приходит не функция. 6 янв 2022 в 19:46

1 ответ 1

0

у тебя 2 обработчика стоит, последний переписывает первый, поэтому оставь вместо этого

onChange={e => setValueSort(e.target.value)}
onChange={SortNeW}

это

onChange={e => SortNeW(e.target.value)}

и принимай значение внутри функции вместо стейта. А если нужен все таки стейт тогда оставь

onChange={e => setValueSort(e.target.value)}

и добавь useEffect(() => {...code}, [ValueSort]) и подставь свою функцию туда

Ваш ответ

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

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