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

【问题标题】：React.js search bar always fetches the same contentReact.js 搜索栏总是获取相同的内容
【发布时间】：2018-07-16 15:44:31
【问题描述】：

我正在使用 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'));

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;

Giflist：

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;

GifItem：

import React from 'react';

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

export default GifItem;

我似乎找不到问题出在哪里。是不是因为this.handleTermChange = this.handleTermChange.bind(this)之后没有“更新”状态？

欢迎任何帮助 :) 谢谢！

【问题讨论】：

你能显示GifList组件吗？
我已经更新了这个问题。 @Mayank Shukla

标签： javascript reactjs fetch-api

【解决方案1】：

这是因为，您并没有将用户输入的术语值放在 url 中，而是一直使用静态值 term 访问 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 文档了解有关 Template Literals 的更多详细信息。

【讨论】：

啊！在我认为问题与 API url 有关之前。谢谢！ @Mayank Shukla