Javascript 尝试使用react和Reddit API显示搜索历史记录

我正在尝试将RedditAPI与react一起使用，这样当用户查找subreddit时，它将显示该subreddit中的所有线程以及其他信息。我正在尝试合并一个历史记录功能，该功能将显示用户历史记录，并允许用户在单击以前的搜索时显示该搜索的信息。为此，我创建了一个数组的状态变量，该数组将包含所有用户以前的搜索，以及一个名为history的组件，该组件将获取该数组并将所有搜索显示为可单击按钮。但是，当我尝试导入我的历史组件时，我得到一个错误，即“/History”不包含默认导出，即使它包含默认导出，我也不知道为什么。 以下是App.js：

import History from './History/History';

class App extends React.Component{
  constructor(){
    super();
    this.state={
      threads: [],
      loading:false,
      previousSearch: []
    };
  }
  handleSearch = async (searchValue) => {
    this.setState({ loading: true });

    let [threads] = await Promise.all([
      getThreads(searchValue)   
    ]);
    console.log(searchValue)

    this.setState({ threads, loading: false, previousSearch:this.state.previousSearch.concat(searchValue)});
  }
  render(){
    return (
      <div>
        <SearchForm onSearch={this.handleSearch}/>
        {this.state.loading && <Loading />}
        <History previousSearches={this.state.previousSearch}/>
        <div>
        <ThreadList threads={this.state.threads}/>
        </div>
      </div>
      );
  }
}

从“./History/History”导入历史记录；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
这个州={
线程：[]，
加载：false，
以前的搜索：[]
};
}
handleSearch=async（searchValue）=>{
this.setState（{loading:true}）；
让[线程]=等待承诺([
getThreads（searchValue）
]);
console.log（searchValue）
this.setState（{threads，loading:false，previousSearch:this.state.previousSearch.concat（searchValue）}）；
}
render（）{
返回(
{this.state.loading&&}
);
}
}

下面是History.js：

import React from 'react'

export default function History(props){
  {props.previousSearches.map((term) => {
   return (
    <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}>
      {term}
    </button>
  );
})}
}

从“React”导入React
导出默认函数历史记录（道具）{
{props.previousSearches.map（（术语）=>{
返回(
{term}
);
})}
}

我认为History.js中有一个错误

应该是这样的

export default function History(props) {
    return props.previousSearches.map((term) => {
        return (
            <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}>
              {term}
            </button>
        );
    })
}

导出默认功能历史记录（道具）{
返回道具.previousSearches.map（（术语）=>{
返回(
{term}
);
})
}

---

还要注意绑定，因为它取决于上下文，在运行时理解它对我来说并不简单。

您需要从History.js返回

import React from 'react';
export default function History(props)  {

     return props.previousSearches.map((term) => { 
          return (
                 <button type="button" onClick={this.applyPreviousSearch.bind(this, term)}> {term} </button> 
          ); 
     });
 }

从“React”导入React；
导出默认函数历史记录（道具）{
返回props.previousSearches.map（（术语）=>{
返回(
{term}
); 
});
}

除了Sergio所说的之外，我还想补充一点，如果IDE给您带来意外的错误消息，那么重启IDE有时会很有帮助。有时IDE的错误检查会崩溃/缓存或停止正常工作，重新启动会有所帮助。

请不要破坏您的帖子。如果您的帖子存在需要删除的问题（并且您自己无法删除，因为已经有答案），请标记它以引起版主注意并解释原因。您的问题标题是什么？“ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff。通过在Stack Exchange（SE）网络上发布，您已经在下授予SE分发内容的不可撤销权利（即，无论您未来的选择如何）。根据SE政策，分发非故意破坏版本。因此，任何故意破坏行为都将恢复原状。请参阅：。如果允许删除，则在帖子下方左侧有一个“删除”按钮，但它仅在浏览器中，而不是移动应用程序中。