I'll try and keep it simple and concise.
I have started a simple page with React Webpack and Firebase included.
I set the initial state for DVDLibrary as null.
Inside the componentDidMount function I set the state as a firebase snapShot.val().
When I console.log the DVDLibrary state, it logs null.
import React from "react";
import ReactDOM from "react-dom";
import firebase from 'firebase';
export default class Front extends React.Component {
constructor(){
super();
this.state = {
DVDLibrary : null
};
};
componentDidMount(){
firebase.database().ref().on('value',snapShot => {
this.setState({
DVDLibrary: snapShot.val()
});
});
console.log(this.state.DVDLibrary);
};
render()....
}
If I include the contents of the componentDidMount function inside the constructor function, the console logs as expected but the new state doesn't seem to leave the scope of the constructer.
I tried to include a console.log in a componentDidUpdate function but it didn't log anything.
What am I doing wrong?
Any help is much appreciated.
Thanks All.
Moe
Related
Sorry the headline might be confusing, I didn't know how to do the right wording. So I tired the example from this answer https://stackoverflow.com/a/50466217/12848667 and it works for me. I can call window.helloComponent.alertMessage() in the console and get the output.
import React from 'react';
import './App.css';
class App extends React.Component{
constructor(){
super();
window.helloComponent = this;
}
alertMessage(){
console.log("Called from outside");
}
render(){
return (
false
)
}
}
export default App;
Now I want to use that functionality in my App but I use hooks, I don't have a constructor and I don't have this.
How can I add this solution to a more modern hooks based/functional App without converting the whole App component to class based?
How can i retrieve some data from a local json file i created in my folder? i´m using the following code:
class Intro2 extends Component {
render() {
async function getData() {
const usersData = await fetch("../articles.json");
const users = await usersData.json();
return users;
}
}
This doesn't seem to work for my local json file but if i use a url from git hub users for example its working?
many thanks
The error: main.chunk.js:332 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
You shouldn't be using fetch.
Use import instead. This will ensure webpack doesn't bundle the json file.
But makes it available in the public directory.
const usersData = await import("../articles.json");
Fetch will never work because webpack won't serve your JSON file.
Not unless you put it in a the static or public folder.
I think if you're trying to read from your file system you won't be able to do it, because in at least some browsers, you will need to serve the file via a web server process.
But if you are trying to read from http://localhost:9000/articles.json the issue could be another thing.
Maybe you need the {mode:'no-cors'} param ?
fetch('../static/test.txt', {mode: 'no-cors'})
Else you could simply export it:
export const json = () => ({...})
and then import it to your file:
import {json} from '../json
Assuming the json is in the project's folder structure.
import React from "react";
import ReactDom from "react-dom";
import usersData from "../articles.json";
class Intro2 extends React.Component {
state = {
usersData: { ...usersData },
};
componentDidMount() {
// a place for promises
};
render() {
// where the jsx is rendered
return <div>Renders JSX with state {this.state.usersData.aKey}</div>;
}
};
or with react functional components
// Alternatively, use functional components:
import React from "react";
import usersData from "../articles.json";
function Intro2() {
const [usersData, setUsersData] = React.useState({ ...usersData });
return <div>Renders JSX with state {usersData.aKey}</div>;
}
I was fetching data using onclick button but now i wanna fetch on page load using componentDidMount().
My fetch function is under action file and i am using react native with redux.
My function name is submitToServer(){}. How can i call it on componentDidMount?
Can anyone help me?
import React from 'react';
class SomeComponent extends React.Component {
componentDidMount() {
// here you fetch your data
submitToServer();
}
render() {
// ...
}
}
The submitToServer() call will then trigger some Redux store changes, which the react-redux library will process and trigger a properties change event in your SomeComponent component (if connected, of course). Then, your component will be re-rendered, and you would be able to use the retreived data.
The link for the code is : https://gist.github.com/justgoof9/b0ff1033cc83edeb72c687da0de4f89f
The problem with this is that It keeps on searching it and it never stops. How do I make it so that after the first search it stops?
As per your code here https://gist.github.com/justgoof9/b0ff1033cc83edeb72c687da0de4f89f
you are doing search in render and while you setState your render is being called again so this is causing infinite search so move that code to lifecycle method like componentWillMount or componentDidMount like this:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const API_KEY = "9f64caf0";
class App extends Component {
constructor(props){
super(props);
this.state={
movies:[],
}
}
componentDidMount(){
const imdb = require("imdb-api");
imdb
.search({ title: "Game Of Thrones" }, { apiKey: API_KEY })
.then((movies)=>{this.setState({movies})})
console.log(this.state.movies)
}
render() {
return (
<div >
</div>
);
}
}
export default App;
You should use componentDidMount commit lifecycle hook for api calls not render or even componentWillMount
From React documentation - https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#fetching-external-data
I am Quoting specific lines from the above page.
There is a common misconception that fetching in componentWillMount lets you avoid the first empty rendering state. In practice this was never true because React has always executed render immediately after componentWillMount. If the data is not available by the time componentWillMount fires, the first render will still show a loading state regardless of where you initiate the fetch. This is why moving the fetch to componentDidMount has no perceptible effect in the vast majority of cases.
Using Mobx, after updating the store (i.e. clicking the button) the component does not re-render. I've installed mobx devtools which shows nothing after the initial load, and there is no error in the console. Any ideas what I've done wrong?
Store.js:
import { observable } from 'mobx';
class Store {
#observable me;
constructor() {
this.me = 'hello';
}
change_me(){
this.me = 'test 1234';
}
}
export default Store;
layout.js:
import React from "react";
import { observer } from 'mobx-react';
#observer
export default class Layout extends React.Component{
render(){
return(
<div>
<h1>{this.props.store.me}</h1>
<button onClick={this.on_change}>Change</button>
</div>
)
}
on_change = () => {
this.props.store.change_me();
}
}
index.js:
import React from "react";
import ReactDOM from "react-dom";
import Layout from "./components/Layout";
import Store from "./Store";
import DevTools, { configureDevtool } from 'mobx-react-devtools';
// Any configurations are optional
configureDevtool({
// Turn on logging changes button programmatically:
logEnabled: true,
// Turn off displaying conponents' updates button programmatically:
updatesEnabled: false,
// Log only changes of type `reaction`
// (only affects top-level messages in console, not inside groups)
logFilter: change => change.type === 'reaction',
});
const app = document.getElementById('app');
const store = new Store();
ReactDOM.render(
<div>
<Layout store={store} />
<DevTools />
</div>
, app);
I would start by adding #action to your change_me() function. From what I understand, it's not always completely required, but I have encountered problems like this in my own code several times when I've forgotten to add it.
Additionally post your .babelrc as #mweststrate suggested, as it will help others to check that the proper plugins are loaded.
Just add makeObservable(this); in constructor function like below
constructor() {
makeObservable(this);
}
My guess would be to have uninitialized #observable. It is very counter-intuitive, but Babel doesn't handle those well. Even adding #observable me = undefined might help (see the generated js code when you assign something there. Generally I'd remove constructor completely and move the initialization to declaration (i.e. #observable me = "hello" an no constructor). It should then work fine.
Watch the binding of the this context.
<button onClick={this.on_change}>Change</button>
the this reference will not be to the class, so likely when you are actually clicking it is going to say something along the lines of no props on undefined. Changing to:
<button onClick={this.on_change.bind(this)}>Change</button>
should fix it. Or better yet, bind the context in the constructor so its not re-binding on every render
constructor(props) {
super(props)
this.on_change = this.on_change.bind(this)
}
then you can go back to your