React Component未呈现新列表

Question

Ok, so I'm building a giphy search project app just to get familiar with react and I have everything working so far except the part where I change the state of the input to be the value of the text input in the SearchBar component on the click of the button. Right now I have it hard coded as duke b4 the button click and unc after the click but its not re rendering the list of gifs. Any help and explanations woulds be appreciate.

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

Array is mutable. Change your setState to

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