Как передать состояние другому компоненту, используя хук useState () и history.pu sh () - PullRequest
Новая
       5

Как передать состояние другому компоненту, используя хук useState () и history.pu sh ()

0 голосов
/ 08 апреля 2020

Я пытаюсь реализовать панель поиска, которая, когда пользователь начинает печатать, перемещает пользователя в новое представление, которое отображает результаты в этом представлении.

У меня есть следующий код, который позволяет пользователю начать поиск, устанавливает searchInput в состояние и перемещает пользователя в новое представление.

Проблема в том, что я не могу передать и получить доступ к состоянию searchInput из компонента SearchBar в компонент SearchResultsView.

SearchBar.tsx 

import * as React from 'react'
import { useState } from 'react';
import { useHistory } from 'react-router-dom';

export const SearchBar = () => {

    const [searchInput, setSearchInput] = useState('');
    const history = useHistory();

    const handleInputChange = (value: string) => {
        setSearchInput(value);
        history.push('/search-results', { searchInput: searchInput });
    }

    return (
        <input
            type="text" 
            value={searchInput}
            onChange={(e) => handleInputChange(e.target.value)}   
        />
    )
}

Вот SearchResultsView, где я хочу просто получить доступ к запросу searchInput (тогда я могу приступить к построению логики поиска c) 

import * as React from 'react'

export const SearchResultsView = (searchInput) => {

    // What I've tried that didn't work
    const query = searchInput // returns empty
    const state = useState('searchInput') // returns empty

    return (
        <div>
            {/* Searching for: {searchInput} */}
        </div>
    )
}

Для получения дополнительной информации, вот как я настраиваю search-results маршрут 

export const App = () =>  {
  return (
    <HashRouter>
      <div>
        <AppSidebar/>
          <Switch>
            <Route path="/" exact render={() => <MainView/>}/>
            <Route path="/search-results" exact render={() => <SearchResultsView/>}/>
          </Switch>
        </div>
      </div>
    </HashRouter>
  )
}

1 Ответ

0 голосов
/ 08 апреля 2020

С history.push вы пытаетесь передать searchInput как состояние. К которому можно обратиться в другом компоненте как location.state. Но учтите, что searchInput не устанавливается во время его передачи, потому что установка состояния является асинхронным процессом. 

const handleInputChange = (value: string) => {
    setSearchInput(value);
    // searchInput is not yet set here, so using value
    history.push('/search-results', { searchInput: value });
}

Если вы хотите установить это из состояния, вы можете использовать useEffect для этой цели. 

useEffect(() => {
  if(searchInput) {
    history.push('/search-results', { searchInput });
  }
}, [searchInput]);

В обоих случаях вы можете получить к нему доступ с помощью: 

const location = useLocation();

// location.state would be undefined if user is directly taking this url
const { searchInput } = location.state || { searchInput: '' };

Вы можете использовать параметры запроса, если хотите, чтобы пользователь ссылался на страницу поиска с помощью param.

Codesandbox Demo

...