Question

我在这里有一个组件，它应该在路由基础搜索词中显示来自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(){
    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>
    )
}

这两个组件在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（不工作）

其实我不知道问题是什么。

React Router不会更新组件

0 个答案: