Reactjs React路由器不更新组件

我在这里得到了一个组件，它应该在路由基础搜索词上显示来自giphy的GIF：

public render(){
    return(
        <div>
            <Router>
                <div>
                    <Route path='/:term' component={this.dispGiphy}  />
                </div>
            </Router>
        </div>
    )        
} 

 private readonly dispGiphy = (props) => {
    this.getGifs(props.match.params.term)
    return(
    this.state.items.map(data => (
        <img className="images" src={data.images.downsized.url} />
    )))
 }

public getGifs(inputValue){ 
    // Get Request to the API and write the result to this.state.items
    fetch("https://api.giphy.com/v1/gifs/search?limit=3&api_key=KEY_GOES_HERE&q=" + inputValue)
          .then(res => res.json())
          .then(
              (result) => {
                  this.setState({
                      isLoaded: true,
                      items: result.data
                  });
              },
              (error) => {
                  this.setState({
                      error,
                      isLoaded: true
                  });
              }
          )
  }

public render（）{
返回(
)        
} 
私有只读显示=（道具）=>{
this.getGifs（props.match.params.term）
返回(
this.state.items.map（数据=>(
)))
}
公共getGifs（inputValue）{
//获取对API的请求，并将结果写入this.state.items
取回（“https://api.giphy.com/v1/gifs/search?limit=3&api_key=KEY_GOES_HERE&q=“+输入值）
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
项目：结果数据
});
},
（错误）=>{
这是我的国家({
错误，
isLoaded：正确
});
}
)
}

我还得到了一个列表，列出了以前的搜索词：

 public render(){
    return(
        <div>
        <ul id="ul_LeftList">
        {this.state.terms.map((term) => (
           <li key={term}>
          <Link to={`${term}`}>{term} </Link><button className="fa fa-cancel btnDelete" onClick={this.deleteElement(term)}
        >X</button>
         </li>
        ))}
    </ul>
    </div>
    )
}

public render（）{
返回(

{this.state.terms.map（（term）=>(

{term}X

))}

)
}

这两个组件在app.tsx中绑定在一起

return(
    <div>
        <div><header className="App-header">
     <input type="text" placeholder="Search..." onChange={this.searchChanged} />   
     <button type="submit" className="fa fa-search searchButton"  onClick={this.process} />
   </header>
   </div>
   <Router>
   <p className="leftList">
        <LeftList terms={this.state.searchterms} />
        </p>
    </Router>
        <p className="App-content">
        <Router>
        <Route path='/:term' component={Giphy}  />
        </Router>
        <Giphy />
        </p>

    </div>
)

返回(




)

现在，当我单击LeftList中的链接时，我希望看到两件事： 1.将使用我刚才单击的搜索词更新路线（工作） 2.Giphy组件显示与路由中搜索词相关的新GIF（不工作）

---

实际上我不知道问题出在哪里

this.getGifs函数做了什么将其添加到上述代码您的应用程序中有多个路由器组件，这是不正确的；其次，您在this.displayGifs中调用getGifs，这在技术上是不正确的，因为

此

在无状态组件中不可用，在呈现方法中调用API也是不正确的。请纠正这些，它应该会工作