Question

我正在尝试为我的网站创建一个搜索功能，该功能可以获取音乐艺术家的名字并返回一些json数据，其中包括该艺术家的下一个事件。我已经设置了默认值（“ ariana grande”），并且看到函数调用运行良好，但是当我输入搜索例如Guns N'Roses时，我得到了一个json文件并更新了状态，但是我的组件主要具有组件不会使用新的state.items数据更新

import React, { Component } from 'react';
import './resources/styles.css';
import {Element} from 'react-scroll';

import Header from './components/header_footer/Header';
import Featured from './components/featured';
import VenueInfo from './components/VenueInfo';
import Highlights from './components/Highlights';
import Pricing from './components/Pricing';
import Location from './components/Location';
import Footer from './components/header_footer/Footer';
import { myConfig } from './config';

const myKey = myConfig.KEY_2;


class App extends Component {

  state = {
    items: [],
    didLoad: false,
    query: "ariana grande",
    names: []
  }

  async grabArtistInfo(artistSearched) {
    const artistSearch = `${artistSearched}`
    const url = `https://api.songkick.com/api/3.0/artists/${artistSearch}/calendar.json?apikey=${myKey}`
    const response =  await fetch(url);
    const data = await response.json();
    await this.setState({items:data, didLoad:true});
  }


  async componentDidMount() {
    await this.getSearchedName(this.state.query)
  }

  async getSearchedName(artist){
    await this.setState({query: artist});
    const  searchUrl = `https://api.songkick.com/api/3.0/search/artists.json?apikey=${myKey}&query=${this.state.query}`
    const response = await fetch(searchUrl);
    const data = await response.json();
    this.setState({names: data})
    this.grabArtistInfo(this.state.names.resultsPage.results.artist[0].id)
  }

  render() {
    if (this.state.didLoad === true) {
      return (
        <div className="App">
          <Header searched = {(artist) => this.getSearchedName(artist)} />
          <Element name = 'Featured'>
            <Featured 
              deadline = {this.state.items.resultsPage.results.event[0].start.datetime}
            />
          </Element>
          <Element name = "Venue_info">
            <VenueInfo/>
          </Element>
          <Element name = "Highlights">
            <Highlights/>
          </Element>
          <Element name = "Pricing">
            <Pricing/>
          </Element>
          <Element name = "Location">
            <Location 
              lng = {this.state.items.resultsPage.results.event[0].venue.lng} 
              lat = {this.state.items.resultsPage.results.event[0].venue.lat}
              desc = {this.state.items.resultsPage.results.event[0].venue.displayName}
              locationDetails = {this.state.items.resultsPage.results.event[0].location.city}
              />
          </Element>
          <Footer/>
        </div>
      );
    }
    else {
      return (
        <div>Loading ... </div>
      )
    }
  }
}

export default App;

Answer 1

从这里删除等待等待this.setState（{items：data，didLoad：true}）; 您需要使用功能集状态；每次setState时，都会从状态中删除所有其他字段/键。

组件将不会使用新的API调用进行更新

1 个答案: