Question

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

我目前正处于学习反应的过程中，而且我真的很挣扎。今天我试图找出如何将状态（在代码中为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/的内容在线创建应用程序，并在此处添加链接。）

Answer 2

您的state对象已更新，但您的视图未更新。

尝试在此统计信息组件中添加shouldComponentUpdate。

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

Answer 3

我明白了。看起来像this.state是一个boolean.State，作为布尔值，不会呈现给屏幕。一旦我将它转换为字符串，它就会显示出来。谢谢你的帮助！

为什么我没有将状态渲染到屏幕上？

3 个答案: