提问者:小点点

我试图用this.setState()更改组件的状态,但它不能工作


null

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import Landingpage from './components/Landingpage';
import Mainbody from './components/Mainbody';
import './App.css';

import axios from 'axios';
import { FORTNITE_IO } from './config'

class App extends Component {
  state = {
      itemShop: {},
      test: 'damiisdandy'
    };

  getItemShop = () => 
    axios.get('https://fortniteapi.io/shop?lang=en', {
          headers: {
              Authorization: FORTNITE_IO
          }
      })
      .then(res => res.data)
      .catch(err => err);
  
  componentDidMount() {
    this.setState({itemShop: this.getItemShop()})
    this.setState({test: 'feyi'})
    console.log(this.state)
  }

  render() {
    return (
      <div className="App">
        <div className="sil">
            <img style={{ zIndex: 0 }} src="./img/glider-sil.png" alt=""/>
        </div>
        <Navbar />
        <Landingpage />
        <Mainbody />
        <footer>
            <img src="./img/midas3.png" alt="geng"/>
            <img className="footer-img" src="./img/midas1.png" alt="geng"/>
        </footer>
      </div>
    )
  }
}

export default App;

null

我是一个新的反应者,我正在用axios发出一个请求,并尝试用响应数据更新我的状态我尝试用this.setState()更新状态,但它似乎根本没有更新状态。 拜托,我需要帮助!!!!!!


共2个答案

匿名用户

删除console.log(this.state)并使用React devtools扩展来查看状态。

匿名用户

对您来说,最好的做法是发出请求,当响应进来时,调用set state。 当您调用componentDidMount和set state时,请求不会立即传入。 所以最好的办法。

getItemShop = () => {
    axios.get('https://fortniteapi.io/shop?lang=en', {
          headers: {
              Authorization: FORTNITE_IO
          }
      })
      .then(res => {
           this.setState({itemShop: res.data})
      }
      .catch(err => err);
}