Second time posting on stackoverflow :) Hopefully I won't be too vague.
I'm currently in the process of learning react and am really struggling. Today I am trying to figure out how to render the state (in the code it is this.state.feelings) to the screen.
Everything is console.logging the correct information, so I know the state HAS changed. I'm just not sure why it's not rendering.
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;
Any idea what I'm doing wrong?
more code:
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>
);
}
}
The first file you posted works fine.
Here it is, slightly modified to work in a browser:
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>You'll need to post the rest of your code for more help. (Please don't add any more files to your question, create the app online using something like https://stackblitz.com/ and add the link here).
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加