Javascript '；这'；renderMenuItemChildren中未定义

我正在使用。在

renderMenuItemChildren

方法中，我想调用另一个方法

handleSubmit

来获取所选项目的详细信息

此

在

renderMenuItemChildren

中未定义，我无法调用该方法。感谢您的帮助

另外，我还在学习如何反应，所以可能有一个愚蠢的错误我无法识别

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTitle: '',
      defaultUrl: 'http://www.omdbapi.com/?t=arrival'
    };
    this.handleSearch = this.handleSearch.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fetchApiData = this.fetchApiData.bind(this);
  }

  componentDidMount() {
    this.fetchApiData(this.state.defaultUrl);
  }

  fetchApiData(url){
    fetch(url) 
     .then((result) => {
        return result.json()
     })
     .then((json) => {
        if(json.Response === "True"){
          this.setState({
            title: json.Title,
            year: json.Year,
            released: json.Released,
            runtime: json.Runtime,
            genreList: json.Genre,
            actors: json.Actors,
            plot: json.Plot,
            poster_url: json.Poster,
            rating: json.imdbRating,
            boxOffice: json.BoxOffice,
            votes: json.imdbVotes,
            response: json.Response
        });
      }
      else {
        this.setState({
          response: json.Response,
          error: json.Error
        });
      }
    })
    .catch((err) => {
      console.log(err);
    })
  }

  handleSubmit(query){
    if (!query) {
      return;
    }
    this.fetchApiData(`http://www.omdbapi.com/?t=${query}`);
  }

  handleSearch(query) {
    if (!query) {
      return;
    }

    fetch(`http://www.omdbapi.com/?s=${query}`)
      .then((result) => {
        return result.json()
      })
      .then((json) => {
        //console.log(json.Search);
        this.setState({
          options: json.Search
        })
      });
  }

  renderMenuItemChildren(option, props, index) {
    return (
      <div key={option.imdbID} onClick={() => 
        this.handleSubmit.bind(option.Title)}>
        <span>{option.Title}</span>
      </div>
    );
  }

  render() {
    return (
      <div className="row">
        <div className="col-xs-12 col-lg-10 col-lg-offset-1">
          <div className="App-header col-xs-12">
            <div className="row">
              <div className="col-xs-12 col-sm-6 col-lg-5">
                <h1><a href="http://www.omdbapi.com/" className="omdb-link" title="The Open Movie Database">OMDb</a></h1>
              </div>
              <div className="col-xs-12 col-sm-6 col-lg-7">

                <AsyncTypeahead
                  ref="typeahead"
                  {...this.state}
                  labelKey="Title"
                  onSearch={this.handleSearch}
                  options={this.state.options}
                  placeholder='Search Title'
                  className="search-input-box"
                  renderMenuItemChildren={this.renderMenuItemChildren}
                />
              </div>
            </div>
          </div>
          <SearchBody data={this.state} />
      </div>
    </div>
    );
   }
  }

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
searchTitle:“”，
默认URL:'http://www.omdbapi.com/?t=arrival'
};
this.handleSearch=this.handleSearch.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.fetchApiData=this.fetchApiData.bind（this）；
}
componentDidMount（）{
this.fetchApiData（this.state.defaultUrl）；
}
获取数据（url）{
获取（url）
。然后（（结果）=>{
返回result.json（）
})
。然后（（json）=>{
if（json.Response==“True”）{
这是我的国家({
title:json.title，
年份:json,年份,，
released:json.released，
runtime:json.runtime，
genreList:json.Genre，
actors:json.actors，
plot:json.plot，
poster_url:json.poster，
评级：json.imdbRating，
boxOffice:json.boxOffice，
投票：json.imdbvows，
response:json.response
});
}
否则{
这是我的国家({
response:json.response，
错误：json.error
});
}
})
.catch（（错误）=>{
控制台日志（err）；
})
}
handleSubmit（查询）{
如果（！查询）{
返回；
}
这是fetchApiData(`http://www.omdbapi.com/?t=${query}`）；
}
handleSearch（查询）{
如果（！查询）{
返回；
}
取回(`http://www.omdbapi.com/?s=${query}`）
。然后（（结果）=>{
返回result.json（）
})
。然后（（json）=>{
//log（json.Search）；
这是我的国家({
选项：json.Search
})
});
}
RenderNuItemChildren（选项、道具、索引）{
返回(
this.handleSubmit.bind（option.Title）}>
{option.Title}
);
}
render（）{
返回(
);
}
}

您还需要在构造函数中绑定函数

renderMenuItemChildren

：

添加以下内容：

this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);

下面是一篇很好的小博文，介绍了几种方法： 也就是说我更喜欢lodash's bindAll：

---

.bindAll（这是函数1、函数2、函数3）

您还需要在构造函数中绑定函数

renderNuItemChildren

：

添加以下内容：

this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);

下面是一篇很好的小博文，介绍了几种方法： 也就是说我更喜欢lodash's bindAll：

---

.bindAll（这个，函数1，函数2，函数3）

您需要在构造函数中对其他方法（

handleSearch

，

handleSubmit

等）执行您已经完成的操作：

this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);

---

（或其他几种方法，但这是您用于其他方法的方法，因此…

您需要在构造函数中执行您为其他方法所做的操作（

handleSearch

，

handleSubmit

，等等）：

this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);

---

（或其他几种方法，但这是用于其他方法的方法，因此…

此处不需要=>函数。您可以使用下面的代码将标题值传递回handleSubmit（）

renderMenuItemChildren（选项、道具、索引）{
返回(
{option.Title}
);
}

此处不需要=>函数。您可以使用下面的代码将标题值传递回handleSubmit（）

renderMenuItemChildren（选项、道具、索引）{
返回(
{option.Title}
);
}

当构造函数中的

renderMenuItemChildren.bind（此）

肯定会起作用时，es6类还允许您使用箭头函数表达式作为类方法。这将自动将

This

（或者，换句话说，上下文）绑定到方法，减少样板代码的数量，并使组件更易于阅读

所以你的代码可以是这样的：

class App extends Component {
  constructor(props) {
  super(props);
    this.state = {
      searchTitle: '',
      defaultUrl: 'http://www.omdbapi.com/?t=arrival'
    };
  }

  // etc...

  renderMenuItemChildren = () => {
    // do stuff
  }
}

---

虽然构造函数中的

renderMenuItemChildren.bind（this）

肯定会起作用，但es6类还允许您使用箭头函数表达式作为类方法。这将自动将

This

（或者，换句话说，上下文）绑定到方法，减少样板代码的数量，并使组件更易于阅读

所以你的代码可以是这样的：

class App extends Component {
  constructor(props) {
  super(props);
    this.state = {
      searchTitle: '',
      defaultUrl: 'http://www.omdbapi.com/?t=arrival'
    };
  }

  // etc...

  renderMenuItemChildren = () => {
    // do stuff
  }
}

---

谢谢你的解决方案。虽然这并没有完全起作用，但我必须按照@t.J.Crowder的建议绑定RenderNuitemChildren。理想地说，您不需要在调用时和构造函数中同时绑定RenderNuitemChildren。其中任何一项都应足够。但是无论如何，我很高兴这个解决方案对你有所帮助。谢谢你的解决方案。虽然这并没有完全起作用，但我必须按照@t.J.Crowder的建议绑定RenderNuitemChildren。理想地说，您不需要在调用时和构造函数中同时绑定RenderNuitemChildren。其中任何一项都应足够。但是无论如何，我很高兴这个解决方案对您有所帮助。谢谢，RenderNuItemChildren是AsyncTypeahead的一个方法，所以我认为可能不需要绑定它。谢谢，RenderNuItemChildren是AsyncTypeahead的一个方法，所以我认为可能不需要绑定它。