Делиться хуками между компонентами

Я пытаюсь понять, как разделить состояние хуков между компонентами. Но вроде не делится. Я делаю что-то не так здесь?

Home.js

export default function Home() {
    
    const [search, setSearch]= useState('');
    
    
    return (
        <div>
            <Input search = {search} handleChangeEvent = {setSearch}  />
            <Products search = {search} handleChangeEvent = {setSearch} />
        </div>
    )
}

Input.js

export default function Input({search, setSearch}) {
  
    

  const handleChangeEvent = (e) => {
      setSearch(e.target.value)
  }
  
    return (
    <div className='App'>

    <input 
    placeholder='search...' 
    value = {search}
    onChange = {handleChangeEvent}
    />


{search}
   

    </div>
  )
}

Живой пример:

const { useState } = React;

/*export default*/ function Home() {
    
    const [search, setSearch]= useState('');
    
    
    return (
        <div>
            <Input search = {search} handleChangeEvent = {setSearch}  />
            <Products search = {search} handleChangeEvent = {setSearch} />
        </div>
    )
}

/*export default*/ function Input({search, setSearch}) {
  
    

  const handleChangeEvent = (e) => {
      setSearch(e.target.value)
  }
  
    return (
    <div className='App'>

    <input 
    placeholder='search...' 
    value = {search}
    onChange = {handleChangeEvent}
    />


{search}
   

    </div>
  )
}

const Products = ({search}) => {
    return <div>Product: {search}</div>;
};

ReactDOM.createRoot(document.getElementById("root"))
.render(<Home />);

<div id = "root"></div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

Это опечатка. Вы передали setSearch в Input как handleChangeEvent, но затем пытаетесь использовать его как setSearch. Замените <Input search = {search} handleChangeEvent = {setSearch} /> на <Input search = {search} setSearch = {setSearch} />.

— 06.05.2022 11:28

Привет! Обновите свой вопрос, указав минимальный воспроизводимый пример, демонстрирующий проблему, в идеале работоспособный, используя фрагменты стека (кнопка [<>] на панели инструментов). Фрагменты стека поддерживают React, включая JSX; вот как это сделать. (Редактировать: я сделал это для вас, что показало мне проблему выше.)

— 06.05.2022 11:28

reactjs react-hooks

06.05.2022 11:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы передаете handleSearch как реквизит в своем компоненте Home, но Input ожидает setSearch, поэтому просто измените эту строку в своем Home

return (
  <div>
    <Input search = {search} setSearch = {setSearch}  />  // change here
    <Products search = {search} handleChangeEvent = {setSearch} />
  </div>
)

06.05.2022 11:40

Другие вопросы по теме

React Hook — используйте один и тот же код, но с другим поведением

Почему состояние React в localStorage удаляется

Почему хук React useRef выдает ошибку при использовании?

Как издеваться над параметрами useRouter для библиотеки тестирования-перехватчиков?

Как я могу добавить пустые новые поля, нажав на кнопку?

Как сопоставить данные API Strapi в React JS

Извлечение json из массива

Обновление состояния из массива с помощью хука react useState

Мой пользовательский модальный режим не закрывается из-за хука useState реакции

Почему useEffect React Hook не работает должным образом с зависимостью?

Делиться хуками между компонентами

Ответы 1

Другие вопросы по теме

Похожие вопросы