Блог

Главная - Вопросы по программированию - Как получить доступ к значениям состояния из другого класса в React?

Как получить доступ к значениям состояния из другого класса в React?

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я пытаюсь создать панель поиска, которая отфильтровывает набор данных. Функция поиска, которую я создал, использует несколько состояний для фильтрации результатов. Когда строка поиска и страница результатов находятся в одном классе, функция поиска работает, но то, что я пытаюсь сделать сейчас, это отделить строку поиска и отобразить результаты поиска на отдельной странице. Вот состояние, устанавливаемое в классе SearchBar.

   handleChange = (event) => {
    this.setState({
      names: event.target.value
    })
  }

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

 const filteredData = data.filter(entry => (entry.name === (this.state.names))

Эти данные фильтруются в классе Search, но this.state.names сохраняются в классе SearchBar . Этот класс панели поиска отображается в моем заголовке, где пользователи могут искать все, что они хотят, и после нажатия кнопки поиска появляется страница результатов. Итак, как я могу взять данные, хранящиеся в классе SearchBar, и использовать их в другом классе?

ОБНОВЛЕНИЕ: я попытался передать состояние классу Search в функции визуализации, но это приводит к тому, что вся страница просто зависает.

 render() {

  return (
    <Search names = {this.state.names} />
  )
}

Комментарии:

1. Я не смог уследить за ходом мыслей, не могли бы вы добавить код, а затем указать, чего вы хотите достичь

2. Вам нужно будет перенести состояние в родительский компонент, а затем передать его через props (обычный) или Context (не такой распространенный). В качестве альтернативы вы могли бы использовать что-то вроде Redux, но это, вероятно, излишне, если это ваша единственная проблема.

3. И как это должно быть сделано, потому что я пытался выполнить <Search names = {this.state.names} /> функцию рендеринга в классе SearchBar, и теперь моя страница не загружается. Что я делаю не так?

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

Ответ №1:

Не уверен, правильно ли я понял, но:

  1. Вы можете создать новый компонент для хранения ваших данных.
  2. Затем используйте эту функцию (или аналогичную) в onChange для этого компонента 
      const filterData = (e) => {
  const valueToCheck = e.target.value
  let newArr = []
     for(entry of data) {
     // do the logic
     //push the data you want into an array
     newArr.push(entry)
     }
  setState(newArr)
 }

Ответ №2:

Панель поиска должна вызывать обратный вызов onSearchResults([…]), а затем PageResult может принять эти результаты, вам нужен компонент, который организует все.

 const App = () =>{
  const [results, setResults] = useState([]);

  return (<>
    <SearchBar onSearchChange={setResults}/>
    { results.length amp;amp; <PageResult results={results}/> }
  </>)
}

Панель поиска вызовет props.onSearchChange(results) отфильтрованные данные. Компонент приложения отреагирует на это изменение и отправит эти результаты в компонент PageResult

Метки: