Question

好吧，所以我正在构建一个giphy搜索项目应用程序，只是为了熟悉react，到目前为止，我可以进行所有工作，除了将输入的状态更改为SearchBar中文本输入值的部分单击按钮上的组件。现在，我已经将其硬编码为duke b4按钮，单击后单击unc，但是它没有重新呈现gif列表。任何帮助和解释将不胜感激。

import React, { Component } from 'react';
import axios from "axios";
import styles from './App.css';

import Header from './Components/Header/Header';
import GifList from './Components/GifList/GifList';
import SearchBar from './Components/SearchBar/SearchBar'


class App extends Component {

  state = {
    title: "Giphy Search App",
    gifs: [],
    userInput: "duke"
  }

  componentDidMount() {
      axios.get(`http://api.giphy.com/v1/gifs/search?q=${this.state.userInput}&limit=20&api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38`)
        .then((res) => {
          const arr = res.data.data;
          this.setState({ gifs: arr });
      });
  }

  searchQuery = () => {
      this.setState({ userInput: "unc" });
  }

  render() { 
    return (
      <div className={styles.app}>
        <Header title={this.state.title}/>
        <SearchBar query={this.searchQuery}/>
        {this.state.gifs.length > 0 && <GifList gifList={this.state.gifs}/>}
      </div>
    );
  }
}

export default App

Answer 1

数组是可变的。将setState更改为

this.setState({ gifs: [...arr] });

React Component未呈现新列表

1 个答案: