时间戳

首页 > 解决方案 > React Prop 没有价值，无法控制台日志

javascript - React Prop 没有价值，无法控制台日志

问题描述

我正在尝试以道具的形式将 API 数据传递给 App.js。我可以通过控制台记录 API 数据，这样我就知道它已经通过了。当我将它分配给道具时，虽然我得到 ResultList.js:28 Uncaught (in promise) TypeError: this.props.openState is not a function。这是正确的语法吗？抱歉，如果这是一个幼稚的问题，我对这一切都很陌生。

我试过用几种不同的方式分配它，但我对道具的不熟悉阻碍了我。我知道 API 正在返回数据，因为我可以通过控制台将其注销。

````import { Helmet } from "react-helmet";
````import zipcodes from "zipcodes";
````import SearchBar from "../../components/SearchBar/SearchBar";
````import ResultsDisplay from "../../components/ResultDisplay/ResultDisplay";
````import Nav from "../../components/Nav/Nav"
````import API from "../../API";
````import Footer from "../../components/Footer/Footer";
````import "./ResultsList.css";

````class ResultList extends React.Component {
    ````state = {
        ````openState: [],
        ````proPublica: []
    ````}
    ````onSearchSubmit = zipcode => {
        ````const data = zipcodes.lookup(zipcode);
        ````const state = data.state;
        ````const lat = data.latitude.toFixed(2);
        ````const lon = data.longitude.toFixed(2);

        ````const openStateQuery = "lat=" + lat + "&long=" + lon;

        ````API.getOpenStateData("api/v1/legislators/geo/?" + ````openStateQuery).then(OSresponse => {

            ````this.props.openState(OSresponse.data)//making the data a prop so ````we can pass it to app.js
            ````console.log("OSresponse:", OSresponse.data);
            ````console.log(this.props.openState)
        });
    }

   ```` render() {
       ```` return (
           ```` <div>
               ```` <Helmet>
                   ```` <style>{'body { background-color: #f0f0f0;}'}</style>
                ````</Helmet>
                ````<Nav />
                ````<SearchBar
                    ````onSubmit={this.onSearchSubmit}
                    ````placeholder="Enter a zip code..."
                ````/>
                ````<div className="container">
                    ````<div className="results-container">
                        ````I removed this divs content for sake of brevity
                  ````  </div>
                ````</div>
                ````<Footer />
            ````</div>
        ````)
    ````}
````}

````export default ResultList;
I would expect the same response as 
console.log("OSresponse:", OSresponse.data);

标签： javascriptreactjsapi

解决方案

您还没有真正提供足够的细节或代码来解决问题所在，但听起来您还没有将正确的道具传递给这个反应组件。您需要将一个函数App.js作为一个名为的道具传递给该文件openState

例如

// App.js
openState = (data) => {
  // do something with the data
  this.setState({ data })
}

render() {
  return <MyComponent openState={this.openState} />
}

推荐阅读