TypeError: Невозможно прочитать свойство 'state' из неопределенного React, состояние, переданное в другой компонент, не определено - PullRequest
Новая
       59

TypeError: Невозможно прочитать свойство 'state' из неопределенного React, состояние, переданное в другой компонент, не определено

1 голос
/ 07 июня 2019

У меня есть строка поиска, когда пользователь вводит ключевое слово. Я получаю релевантные результаты, вызывая API-интерфейсы для своих внутренних служб с помощью функции fetch.Я храню этот ответ от бэкэнда в моем состоянии.Ниже приведен код для SearchBarComponent: 

import React from 'react';
import Searchbar from 'material-ui-search-bar';
import Redirect from "react-router-dom/es/Redirect";


class SearchBarComponent extends React.Component{
constructor() {
    super();
    this.state = {
        results: [],
        dataFetched: false,
        keyword: 'pre fetch keyword'
    };
    this.fetchData = this.fetchData.bind(this);
};

render() {
    if (this.state.dataFetched) {
        return (
            <Redirect to = {{
                pathname: '/results',
                state: {data: this.state.results}

            }}/>
        )
    }

    return (
        <Searchbar
            onChange = {(value) => this.setState({keyword: value})}
            onRequestSearch={() => {
                this.fetchData(this.state.keyword);
            }
            }
        />
    )
}

fetchData (keyword) {
    let url = 'http://localhost:8080/search?name='+encodeURI(keyword);
    console.log(url);
    fetch(url,{
        mode: 'cors',
        headers: {
            'Access-Control-Allow-Origin':'*'
        }
    })
        .then(response => {
            return response.json()})
        .then(data => {
            this.setState({results: data, dataFetched: !this.state.dataFetched});
        })
}
}

export default SearchBarComponent;

После этого я хочу передать свои результаты в свой SearchResultsComponet, чтобы я мог отобразить результаты в стиле Google.Вот как я собираю переданное состояние в свой SearchResultComponent: 

import React from 'react';

class SearchResultComponent extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            results: this.props.location.state.data.results
        }
    }

    render() {
        return(
            <div>
                <h4>{this.state.results}</h4>
            </div>
    )}

}

export default SearchResultComponent

Я получаю сообщение об ошибке в этой строке results: this.props.location.state.data Я не могу понять, что не так.Буду признателен за любую оказанную помощь.Я обрабатываю маршрутизацию через мой файл index.js, как показано ниже: 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import ResultsPage from './Pages/ResultsPage'
import {Route, BrowserRouter as Router} from 'react-router-dom';



const routing = (
    <Router>
        <div>
            <Route exact path={'/'} component={App}/>
            <Route path={'/results'} component={SearchResultComponent}/>
        </div>
    </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Ответы [ 2 ]

0 голосов
/ 07 июня 2019

Ваш компонент SearchResultComponent имеет состояние, инициализированное в конструкторе.Таким образом, при первом вызове render в SearchBarComponent результаты устанавливаются с пустым this.props.location.state.data (кстати, вместо этого вы можете использовать props.location.state.data).Затем, после получения вашего результата, состояние SearchResultComponent не обновляется, поскольку компонент уже смонтирован, поэтому конструктор не вызывается, он находится в componentDidUpdate или getDerivatedStateFromProps.

Я не вижу, где вы вызываете свой SearchResultComponentв SearchBarComponent.

Но, возможно, вы можете сделать это: 

const SearchResultComponent = props => (
            <div>
                <h4>{props.data}</h4>
            </div>
    )}

}

и вызвать ваш SearchResultComponent следующим образом: 

<SearchResultComponent data={this.props.location.data} />
0 голосов
/ 07 июня 2019

Когда и где вы отображаете SearchResultComponent?

'Не удается прочитать свойство' состояние 'из неопределенного' указывает, что this.props.location не определено. Вы уверены, что во время рендеринга этого компонента вы передаете в опоре местоположения значение?

...