Reactjs React无法读取属性'；var'的名称；未定义

我正在从纽约时报API获取数据。 此代码显示错误无法读取未定义的属性q

这是我的react应用程序的index.js文件。此处尝试从此.state访问q的属性

如何解决此错误以及是什么原因导致此错误

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";
import SearchComponent from "./components/Search_component";
import ListViewComponent from "./components/Listview_component";

const api_key = "my api key here";
let url = "https://api.nytimes.com/svc/search/v2/articlesearch.json";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            q: "usa",
        };
    }
    url = url + "?" + $.param({ api_key, q: this.state.q });
    news = $.ajax({
        url: url,
        method: "GET"
    })
        .done(result => {
            console.log(result);
        })
        .fail(err => {
            throw err;
        });

    do_search(keyword) {
        console.log(keyword);
    }

    render() {
        return (
            <div>
                <SearchComponent
                    searchkeyword={keyword => {
                        this.do_search(keyword);
                    }}
                />
                <ListViewComponent data={DATA} /> // I have deleted const DATA to reduce pasted code in SO.
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“jquery”导入$；
从“/components/Search\u component”导入SearchComponent；
从“/components/Listview\u component”导入ListViewComponent；
const api_key=“此处为我的api密钥”；
让url=”https://api.nytimes.com/svc/search/v2/articlesearch.json";
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
问：“美国”，
};
}
url=url+“？”+$.param（{api_key，q:this.state.q}）；
新闻=$.ajax({
url:url，
方法：“获取”
})
.done（结果=>{
控制台日志（结果）；
})
.失败（错误=>{
犯错误；
});
do_搜索（关键字）{
console.log（关键字）；
}
render（）{
返回(
{
此.do_搜索（关键字）；
}}
/>
//我删除了常量数据，以减少SO中粘贴的代码。
);
}
}
render（，document.getElementById（“根”））；

您需要将逻辑包装在方法中，在本例中，将其放入

do\u search

中

如果您尝试在实例方法之外访问它，则此

将是不同的实例。。这样写吧：

do_search(keyword) {
  url = url + "?" + $.param({ api_key, q: this.state.q });
  news = $.ajax({
    url: url,
    method: "GET"
  })
    .done(result => {
      console.log(result);
    })
    .fail(err => {
      throw err;
    });
}

当您在

doSearch

等方法中引用

this

时，这将指向

App

的实例，该实例是由程序中的某个地方创建的

。因此，

状态

也可用

注意：将方法作为道具传递给任何子组件时，不要使用箭头函数，而是将其绑定到构造函数中并使用它。在本例中，像这样编写

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      q: "usa"
    };
    this.do_search = this.do_search.bind(this);
  }

  do_search(keyword) {
    url = url + "?" + $.param({ api_key, q: this.state.q });
    news = $
      .ajax({
        url: url,
        method: "GET"
      })
      .done(result => {
        console.log(result);
      })
      .fail(err => {
        throw err;
      });
  }

  render() {
    return (
      <div>
        <SearchComponent searchkeyword={this.do_search} />
        <ListViewComponent data={DATA} /> // I have deleted const DATA to reduce
        pasted code in SO.
      </div>
    );
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
问：“美国”
};
this.do_search=this.do_search.bind（this）；
}
do_搜索（关键字）{
url=url+“？”+$.param（{api_key，q:this.state.q}）；
新闻=$
.阿贾克斯({
url:url，
方法：“获取”
})
.done（结果=>{
控制台日志（结果）；
})
.失败（错误=>{
犯错误；
});
}
render（）{
返回(
//我已删除常量数据以减少
将代码粘贴到SO中。
);
}
}

尝试将代码放入componentDidMount中，如下所示：

componentDidMount（）{
consturl=url+“？”+$.param（{api_key，q:this.state.q}）；
const news=$.ajax({
url:url，
方法：“获取”
})
.done（结果=>{
控制台日志（结果）；
})
.失败（错误=>{
犯错误；
});
}

正如我在评论中所说的，如果您想使用axios（）处理相同的ajax请求，则不应在react应用程序中使用jQuery：

componentDidMount（）{
获取（url{
参数：{
api_密钥：api_密钥，
问：这个州
}
})
.然后（功能（响应）{
控制台日志（响应）；
})
.catch（函数（错误）{
console.log（错误）；
});
} 

除了你的问题之外：你不应该在react应用程序中使用jQuery！对于ajax请求，我建议使用axios:What@LaurenzGlück所说的，或者

fetch

。这不起作用，因为未绑定时，必须使用“bind”或箭头函数才能获得正确的请求scope@MosèRaguzzini嗯。。刚才看到它会工作，因为它是在

（）=>{}

函数中调用的

searchkeyword={keyword=>{this.do_search（keyword）；}}

。。在这种情况下，无需将其绑定到构造函数中。虽然我不喜欢将

（）=>{}

作为回调道具。是的，问题代码中的问题是变量状态是在构造函数之前访问的，您的代码应该可以工作