Javascript 为什么我不在屏幕上呈现我的状态？

第二次在stackoverflow上发布：）希望我不会太含糊

我目前正在学习反应，我真的很挣扎。今天我想弄清楚如何将状态（在代码中是this.state.features）呈现到屏幕上

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

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}来自'React'；
从“../calls/createStatsFeatures.js”导入GetFeatures
从“../../util/axiosApi.js”导入API；
类Stats扩展组件{
状态={
感受：''
};
componentDidMount（）{
这个。getfeatures（）；
}
GetFeelations=（）=>{
API.getfeatures（）
。然后（res=>
{
返回此.setState（{feelations:res.data[0].feeling}，函数
（）{console.log（this.state.feelations）}）
}
)
.catch（err=>console.log（err））；
};
render（）{
返回(
{这个.状态.感觉}
)
}
}
导出默认统计信息；

知道我做错了什么吗

更多代码：

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>
    );
  }
}

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“./components/Navbar/Navbar.js”导入导航栏；
从“./components/Login/Login.js”导入登录名；
从“./components/Register/Register.js”导入寄存器；
从“/components/Goals/Goals.js”导入目标；
从“/components/Stats/Stats.js”导入统计信息；
从“/components/Update/Update.js”导入更新；
从“./components/Dashboard/Dashboard.js”导入仪表板；
从“/components/reasons/Reasons2.js”导入仪表板原因；
//声明“extends Component”与子级无关
//它扩展了被声明类的功能
//类App是使用组件的扩展功能声明的
类应用程序扩展组件{
render（）{
返回(
{/*TODO-NoMatch路由*/}
);
}
}

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

在这里，它被稍微修改以在浏览器中工作：

const-api={
getfeelations（）{
还愿({
数据：[
{感觉：'测试'}
]
})
}
}
类Stats扩展了React.Component{
状态={
感受：''
};
componentDidMount（）{
这个。getfeatures（）；
}
GetFeelations=（）=>{
api.getfeatures（）
。然后（res=>{
返回此.setState（{feelations:res.data[0].feeling}，函数（）{
console.log（this.state.feelations）
})
})
.catch（err=>console.log（err））；
};
render（）{
返回(
{这个.状态.感觉}
)
}
}
const div=document.createElement（'div'）
document.body.appendChild（div）
ReactDOM.render（，div）

---

您的

状态

对象已更新，但视图未更新

尝试像这样在统计组件中添加

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {
  //probably use deep equal here from lodash, maybe?
  return this.state.feelings !== nextState.feelings; 
}

---

我想出来了。看起来像这样。状态是布尔值。状态作为布尔值不会呈现在屏幕上。一旦我将其转换为字符串，它就会显示出来。谢谢你们的帮助

请您写下一个使用了

react dom

的代码好吗？检查一下我添加的内容是否是您想要的！这个评论非常有用，因为它迫使我以不同的方式看待我的代码。我使用了上面编写的API调用，当它显示我的文本时，我意识到它可能与呈现的信息有关。那时我才发现，布尔状态不会呈现。