1

当用户输入关键字时，我有一个搜索栏，我通过使用 fetch 对我的后端服务进行 api 调用来获得相关结果。我正在将来自后端的响应存储在我的状态中。下面是 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，以便我可以以类似谷歌的方式呈现结果。这就是我将传递的状态收集到我的 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'));
4

2 回答 2

0

您何时/在哪里渲染 SearchResultComponent？

'Cannot read property 'state' of undefined' 表示 this.props.location 未定义。您确定在呈现此组件时您正在传递一个具有值的位置道具吗？

于 2019-06-07T14:08:54.093 回答
0

您的组件 SearchResultComponent 具有在构造函数中初始化的状态。因此，当在 SearchBarComponent 中第一次调用 render 时，结果设置为空 this.props.location.state.data（顺便说一句，您可以使用 props.location.state.data 代替）。然后在获取结果后，SearchResultComponent 的状态不会更新，因为组件已经挂载，所以没有调用构造函数，它在 componentDidUpdate 或 getDerivatedStateFromProps 上。

我看不到您在 SearchBarComponent 中调用 SearchResultComponent 的位置。

但也许你可以这样做：

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

}

并像这样调用您的 SearchResultComponent ：

<SearchResultComponent data={this.props.location.data} />
于 2019-06-07T14:52:58.423 回答