javascript - 为什么我不将我的状态渲染到屏幕上？

Question

第二次在 stackoverflow 上发帖 :) 希望我不会太含糊。

我目前正在学习 react 并且真的很挣扎。今天我想弄清楚如何将状态(在代码中是 this.state.feelings)呈现到屏幕上。

一切都在控制台记录正确的信息，所以我知道状态已经改变。我只是不确定为什么它不渲染。

import React, { Component } from 'react';
import getFeelings from '../calls/createStatsFeelings.js'
import API from "../../util/axiosApi.js";

class Stats extends Component {
  state = {
    feelings:''
  };

  componentDidMount() {
    this.getFeelings();
  }

  getFeelings = () => {
      API.getFeelings()
        .then( res =>
          {
            return this.setState({ feelings: res.data[0].feeling }, function 
() {console.log(this.state.feelings)})
          }
      )
        .catch(err => console.log(err));
      };

  render() {
    return (
       <div className='statsDiv'>
        <h1> {this.state.feelings} </h1>
      </div>
    )
  }
}


export default Stats;

知道我做错了什么吗？

更多代码:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import logo from './logo.svg';
import './App.css';
import Navbar from './components/navbar/Navbar.js';
import Login from './components/login/Login.js';
import Register from './components/register/Register.js';
import Goals from './components/goals/Goals.js';
import Stats from './components/stats/Stats.js';
import Update from './components/update/Update.js';
import Dashboard from './components/dashboard/Dashboard.js';
import DashboardReasons from './components/reasons/Reasons2.js';

// Stating 'extends Component' has nothing to do with the children
// It is extending the capability of the class being declared
// class App is declared with the extended ability of component
class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navbar />
          <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/register" component={Register} />
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/goals" component={Goals} />
            <Route exact path="/update" component={Update} />
            <Route exact path="/stats" component={Stats} />
            <Route exact path="/reasons" component={DashboardReasons} />
            {/* TODO - NoMatch Route */}
          </Switch>
        </div>
      </Router>
    );
  }
}

Answer 1

您发布的第一个文件工作正常。

在这里，稍作修改以在浏览器中工作:

const api = {
  getFeelings() {
    return Promise.resolve({
      data: [
        { feeling: 'test' }
      ]
    })
  }
}

class Stats extends React.Component {
  state = {
    feelings: ''
  };

  componentDidMount() {
    this.getFeelings();
  }

  getFeelings = () => {
    api.getFeelings()
      .then(res => {
        return this.setState({ feelings: res.data[0].feeling }, function () {
          console.log(this.state.feelings)
        })
      })
      .catch(err => console.log(err));
  };

  render() {
    return (
      <div className='statsDiv'>
        <h1> {this.state.feelings} </h1>
      </div>
    )
  }
}

const div = document.createElement('div')
document.body.appendChild(div)
ReactDOM.render(<Stats />, div)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

您需要发布其余代码以获得更多帮助。 (请不要再向您的问题添加任何文件，使用类似 https://stackblitz.com/ 的内容在线创建应用程序并在此处添加链接)。