Javascript React.js搜索栏总是获取相同的内容

我正在用React.js构建一个搜索引擎，在那里我可以使用他们的API查找GIPHY GIF。每次我键入一个单词（任何单词），它总是加载相同的GIF，当我擦除并写入另一个单词时，GIF不会更新

index.js:

import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';

class Root extends React.Component { //Component that will serve as the parent for the rest of the application.

constructor() {
    super();

    this.state = {
        gifs: []
    }
    this.handleTermChange = this.handleTermChange.bind(this)
}

handleTermChange(term) {
    console.log(term);
    let url = 'http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io';
        fetch(url).
    then(response => response.json()).then((gifs) => {
        console.log(gifs);
        this.setState({
            gifs: gifs
        });
    });
};  


render() {
    return (
      <div>
        <SearchBar onTermChange={this.handleTermChange} />
        <GifList gifs={this.state.gifs} />
      </div>
    );
}
}

ReactDOM.render( <Root />, document.getElementById('root'));

import React from 'react';
import GifItem from './SelectedListItem';

const GifList = (props) => {
console.log(props.gifs);
  const gifItems = props.gifs && props.gifs.data && props.gifs.data.map((image) => { 
    return <GifItem key={image.id} gif={image} />
});

  return (
 <div className="gif-list">{gifItems}</div>
  );
};

export default GifList;

import React from 'react';

const GifItem = (image) => {
  return (
<div className="gif-item">
  <img src={image.gif.images.downsized.url} />
</div>
  )
};

export default GifItem;

从“React”导入React//反应库
从“react dom”导入react dom//react DOM-操作元素
导入“./index.css”；
从“./components/Search”导入搜索栏；
从“./components/SelectedList”导入礼品列表；
类根扩展React.Component{//Component，该组件将作为应用程序其余部分的父级。
构造函数（）{
超级（）；
此.state={
gifs:[]
}
this.handleTermChange=this.handleTermChange.bind（this）
}
handleTermChange（期限）{
控制台日志（术语）；
让url为空http://api.giphy.com/v1/gifs/search?q=${term.replace（/\s/g，“+”）}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io'；
获取（url）。
然后（response=>response.json（））。然后（（gifs）=>{
控制台日志（gifs）；
这是我的国家({
吉布斯：吉布斯
});
});
};  
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

search.js

import React, { PropTypes } from 'react'

import './Search.css'

class SearchBar extends React.Component {
onInputChange(term) {
    this.props.onTermChange(term);
}

render() {
    return (
        <div className="search">
            <input placeholder="Enter text to search for gifs!" onChange={event => this.onInputChange(event.target.value)} />
        </div>
    );
}
}

export default SearchBar;

import React，{PropTypes}来自“React”
导入“./Search.css”
类SearchBar扩展了React.Component{
onInputChange（术语）{
此.props.onTermChange（术语）；
}
render（）{
返回(
this.onInputChange（event.target.value）}/>
);
}
}
导出默认搜索栏；

礼品清单：

import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';

class Root extends React.Component { //Component that will serve as the parent for the rest of the application.

constructor() {
    super();

    this.state = {
        gifs: []
    }
    this.handleTermChange = this.handleTermChange.bind(this)
}

handleTermChange(term) {
    console.log(term);
    let url = 'http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io';
        fetch(url).
    then(response => response.json()).then((gifs) => {
        console.log(gifs);
        this.setState({
            gifs: gifs
        });
    });
};  


render() {
    return (
      <div>
        <SearchBar onTermChange={this.handleTermChange} />
        <GifList gifs={this.state.gifs} />
      </div>
    );
}
}

ReactDOM.render( <Root />, document.getElementById('root'));

import React from 'react';
import GifItem from './SelectedListItem';

const GifList = (props) => {
console.log(props.gifs);
  const gifItems = props.gifs && props.gifs.data && props.gifs.data.map((image) => { 
    return <GifItem key={image.id} gif={image} />
});

  return (
 <div className="gif-list">{gifItems}</div>
  );
};

export default GifList;

import React from 'react';

const GifItem = (image) => {
  return (
<div className="gif-item">
  <img src={image.gif.images.downsized.url} />
</div>
  )
};

export default GifItem;

从“React”导入React；
从“/SelectedListItem”导入项目；
常量列表=（道具）=>{
console.log（props.gifs）；
const gifItems=props.gifs&&props.gifs.data&&props.gifs.data.map（（图像）=>{
返回
});
返回(
{gifItems}
);
};
导出默认列表；

礼品项目：

import React from 'react'; //react library
import ReactDOM from 'react-dom'; //react DOM - to manipulate elements
import './index.css';
import SearchBar from './components/Search';
import GifList from './components/SelectedList';

class Root extends React.Component { //Component that will serve as the parent for the rest of the application.

constructor() {
    super();

    this.state = {
        gifs: []
    }
    this.handleTermChange = this.handleTermChange.bind(this)
}

handleTermChange(term) {
    console.log(term);
    let url = 'http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io';
        fetch(url).
    then(response => response.json()).then((gifs) => {
        console.log(gifs);
        this.setState({
            gifs: gifs
        });
    });
};  


render() {
    return (
      <div>
        <SearchBar onTermChange={this.handleTermChange} />
        <GifList gifs={this.state.gifs} />
      </div>
    );
}
}

ReactDOM.render( <Root />, document.getElementById('root'));

import React from 'react';
import GifItem from './SelectedListItem';

const GifList = (props) => {
console.log(props.gifs);
  const gifItems = props.gifs && props.gifs.data && props.gifs.data.map((image) => { 
    return <GifItem key={image.id} gif={image} />
});

  return (
 <div className="gif-list">{gifItems}</div>
  );
};

export default GifList;

import React from 'react';

const GifItem = (image) => {
  return (
<div className="gif-item">
  <img src={image.gif.images.downsized.url} />
</div>
  )
};

export default GifItem;

从“React”导入React；
常量项=（图像）=>{
返回(
)
};
导出默认项；

我似乎找不到问题在哪里。这是因为

this.handleTermChange=this.handleTermChange.bind（this）

之后没有“更新”状态吗

---

欢迎任何帮助：）谢谢

这是因为，您没有将用户输入的术语值放在url中，在您使用静态值点击api时，这里：

'http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io';

将

”

替换为“（勾选），如下所示：

let url = `http://api.giphy.com/v1/gifs/search?q=${term.replace(/\s/g, '+')}&api_key=aOfWv08Of7UqS6nBOzsO36NDvwYzO6io`;

---

查看MDN文档以了解有关

的更多详细信息。您能否显示

礼品列表

组件？我已更新了问题@马扬克，嘘！在我认为问题与API url有关之前。谢谢@马扬克·舒克拉