Question

当用户输入关键字时，我有一个搜索栏，通过使用提取对我的后端服务进行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，以便可以像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'));

Answer 1

何时/在何处呈现SearchResultComponent？

“无法读取未定义的属性'state''表示this.props.location未定义。您确定在渲染此组件时是否正在传递具有值的位置道具？

Answer 2

您的组件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} />

TypeError：无法读取未定义React的属性'state'，传递给其他组件的状态未定义

2 个答案: