why my log not showing anything ? is ths because the variable isLoading state ?
my code :
function getColumns(data) {
const columns = [];
const sample = data[0];
console.log("theSample" + sample);
and i call it from here :
class App extends React.Component {
constructor() {
super();
this.state = { isLoading: true };
if (this.state.isLoading === false) {
//const data = getData();
const data = this.state.dataExt;
// console.log(data);
const columns = getColumns(data);
this.state = {
data,
columns,
visible: false
};
}
}
Because, you only call getColumns when this.state.isLoading === false, and the initial value of your isLoading state is true. Therefore, unless you update your isLoading state, getColumns wouldn't be called and your log wouldn't show up.
Related
Hello I'm trying to test a state that is changed in the componentDidUpdate but is not enetering.
Code
componentDidUpdate (newProps) {
const { dataSource } = newProps
// set value for nextButtonDisabled in first results async load
if (dataSource.length) {
const newPaginationInfo = Object.assign({}, this.state.paginationInfo)
newPaginationInfo.nextButtonDisabled = dataSource.length <= this.pageSize
this.setState({ paginationInfo: newPaginationInfo }) /* eslint-disable-line react/no-did-update-set-state */
}
}
State
this.state = {
paginationInfo: {
currentPage: 0,
nextButtonDisabled: true
}
}
And the test
it('should set nextButtonDisabled to false when gets new props.datasource if datasource length <= 20', () => {
const component = shallow(<VehicleHistoryTable {...makeProps()} />)
component.setProps({ dataSource: createDataSourceMock(3) })
expect(component.instance().state.paginationInfo.nextButtonDisabled).toEqual(true)
})
The function createDataSourceMock() creates an array of numbers, in this case 3 rows.
Any suggestions?
P:S I'm trying to migrate to React 17
There is a state and i want to update this state with in a function.
In function i declared a variable and i want to update state with this variable.
this.state = {
RequestData : [],
searchopen : false,
capturedImage : ""
}
screenShot = () => {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
});
this.setState({capturedImage: base64URL})
}
You need to put setState in function that get base64URL and bind your screenShot function to use this.setState:
// constructor
constructor(props) {
super(props);
this.state = {
RequestData: [],
searchopen: false,
capturedImage: ""
}
this.screenShot = this.screenShot.bind(this);
}
screenShot = () => {
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
this.setState({ capturedImage: base64URL })
}.bind(this)); // bind here also
}
The problem here is you are doing the state update outside the callback function. Since this is a asynchronous task, your method will not work. Try this:
screenShot = () => {
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
this.setState({capturedImage: base64URL})
});
}
Not pretty but should work
this.state = {
RequestData : [],
searchopen : false,
capturedImage : ""
}
screenShot = () => {
var setState = newStore => this.setState((state, props) => ({ ...newStore })); // define the function outside
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// Get base64URL
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg','image/octet-stream');
setState({capturedImage: base64URL}) // use here
});
}
i have a method set_data which is used to set data based on id. I know it could be easy to call this set_data in componentdidupdate when id changes. However in doing so it doesnt set some state variables in the parent component.
To get rid of that want to call set_data method in render . However since this set_data method sets state of data it enters into an infinite loop in render . Also cannot provide a condition (like prevprops.id!== this.props.id) to execute set_data method.
To prevent it thought of using this set_data method not to set state at all. and can call this set_data method in render.
Below is the code,
export default class child extends React.Component {
state = {
query: '',
data: null,
};
empty_id = 0xffffffff;
componentDidMount() {
this.set_open_data();
}
componentDidUpdate(prevProps) {
if (prevProps.id !== this.props.id) {
this.set_data();
}
}
set_data = () => {
if (!this.props.info) {
return;
}
if (this.props.id === this.empty_id) {
this.setState({data: null});
return;
}
let data = {
info: [],
values: [],
};
const info = this.props.info;
for (let i=0, ii=info.length; i < ii; i++) {
if (info[i].meshes.includes(this.props.id)) {
const info = info[i].info;
const values = info[i].values;
data = {
info: typeof info === 'string' ? info.split('\r\n') : [],
values: values ? values : [],
};
break;
}
}
this.setState({data: this.filter_data(data, this.state.query)});
};
render = () => {
const shown_data= this.state.data;
/* i want to call set_data method here*/};}
Could someone help me solve this. Thanks.
You can't call setData there, because that would be anti-pattern. It will trigger a loop that will continuously render as well as keeps setting state.
You can probably rewrite the component this way:
export default class child extends React.Component {
state = {
query: ''
};
empty_id = 0xffffffff;
componentDidMount() {
this.set_open_data();
}
set_data = () => {
let data = {};
if (!this.props.info) {
return data;
}
if (this.props.id === this.empty_id) {
return data;
}
let data = {
info: [],
values: [],
};
const info = this.props.info;
for (let i=0, ii=info.length; i < ii; i++) {
if (info[i].meshes.includes(this.props.id)) {
const info = info[i].info;
const values = info[i].values;
data = {
info: typeof info === 'string' ? info.split('\r\n') : [],
values: values ? values : [],
};
break;
}
}
data = this.filter_data(data, this.state.query);
return data;
};
render = () => {
const shown_data= this.state.data;
const data = this.set_data();
/* i want to call set_data method here*/};}
In this, we are not setting data in the state. For every new ID, it will get new data and will compute it from render thereby avoiding antipattern. I have also removed componentDidMount, since we are doing computation in render. Note: This solution means taking away data from the state, if you are not using data anywhere before render, this will work.
Let me know if this helps.
I am trying to add sorting to my movie app, I had a code that was working fine but there was too much code repetition, I would like to take a different approach and keep my code DRY. Anyways, I am confused as on which method should I set the state when I make my AJAX call and update it with a click event.
This is a module to get the data that I need for my app.
export const moviesData = {
popular_movies: [],
top_movies: [],
theaters_movies: []
};
export const queries = {
popular:
"https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=###&page=",
top_rated:
"https://api.themoviedb.org/3/movie/top_rated?api_key=###&page=",
theaters:
"https://api.themoviedb.org/3/movie/now_playing?api_key=###&page="
};
export const key = "68f7e49d39fd0c0a1dd9bd094d9a8c75";
export function getData(arr, str) {
for (let i = 1; i < 11; i++) {
moviesData[arr].push(str + i);
}
}
The stateful component:
class App extends Component {
state = {
movies = [],
sortMovies: "popular_movies",
query: queries.popular,
sortValue: "Popularity"
}
}
// Here I am making the http request, documentation says
// this is a good place to load data from an end point
async componentDidMount() {
const { sortMovies, query } = this.state;
getData(sortMovies, query);
const data = await Promise.all(
moviesData[sortMovies].map(async movie => await axios.get(movie))
);
const movies = [].concat.apply([], data.map(movie => movie.data.results));
this.setState({ movies });
}
In my app I have a dropdown menu where you can sort movies by popularity, rating, etc. I have a method that when I select one of the options from the dropwdown, I update some of the states properties:
handleSortValue = value => {
let { sortMovies, query } = this.state;
if (value === "Top Rated") {
sortMovies = "top_movies";
query = queries.top_rated;
} else if (value === "Now Playing") {
sortMovies = "theaters_movies";
query = queries.theaters;
} else {
sortMovies = "popular_movies";
query = queries.popular;
}
this.setState({ sortMovies, query, sortValue: value });
};
Now, this method works and it is changing the properties in the state, but my components are not re-rendering. I still see the movies sorted by popularity since that is the original setup in the state (sortMovies), nothing is updating.
I know this is happening because I set the state of movies in the componentDidMount method, but I need data to be Initialized by default, so I don't know where else I should do this if not in this method.
I hope that I made myself clear of what I am trying to do here, if not please ask, I'm stuck here and any help is greatly appreciated. Thanks in advance.
The best lifecycle method for fetching data is componentDidMount(). According to React docs:
Where in the component lifecycle should I make an AJAX call?
You should populate data with AJAX calls in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.
Example code from the docs:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.items
});
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
}
Bonus: setState() inside componentDidMount() is considered an anti-pattern. Only use this pattern when fetching data/measuring DOM nodes.
Further reading:
HashNode discussion
StackOverflow question
I have a React component and there will be an infinite update on the component whenever I connect it to redux and reference to properties from the store. If I just reference/connect one property from the store, the infinite update will not occur. It only happens when I connect two or more and I really cannot determine why this is happening.
When I add shouldComponentUpdate, it will actually not stop the infinite updating, it will just slow it down a lot. I really have no idea what is going on.
UPDATE:
Interestingly, if I just take out the componentDidUpdate function, it will not do an infinite loop and crash the browser.
import React, { Component } from 'react';
import { connect } from 'react-redux';
class UnreadMessages extends Component {
constructor(props) {
super(props);
this.state = {
messageReceived: false,
unreadMessages: 0
}
this.unreadMessages = 0;
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.lastViewedMessageTime === this.props.lastViewedMessageTime) {
this.setState({ messageReceived: true },
() => {
setTimeout(
() => {
this.setState({ messageReceived: false });
},
300
);
}
);
}
const conOne = prevProps.messages.length !== this.props.messages.length;
const conTwo = this.props.visible === false && window.innerWidth < 768;
if (conTwo) {
let index = this.props.messages.length - 1;
const conOne = this.props.messages[index].type === 'chat.msg';
const conTwo = this.props.messages[index].member_type === 'agent';
if (conOne && conTwo) {
this.setState({
unreadMessages: this.state.unreadMessages + 1
});
}
}
if (this.props.visible === true) {
this.setState({ unreadMessages: 0 });
}
}
render () {
let displayBadge = this.state.unreadMessages > 0 ? true : false;
console.log('DISPLAY BAD', displayBadge)
let pulse = this.state.messageReceived === true ? 'pulse' : '';
console.log('PULSE', pulse)
if (!displayBadge) {
return null;
}
return (
<span className={`msgBadge ${pulse}`}>{this.state.unreadMessages}</span>
)
}
}
function mapStateToProps(state) {
return {
lastViewedMessageTime: state.lastViewedMessageTime,
messages: state.chats.toArray(),
visible: state.visible
};
}
export default connect(mapStateToProps, null)(UnreadMessages);
As #Hamms pointed out in the comments, using this.setState inside componentDidUpdate is most likely going to cause issues.
Take the first few lines of componentDidUpdate.
componentDidUpdate(prevProps, prevState) {
if (prevProps.lastViewedMessageTime === this.props.lastViewedMessageTime) {
this.setState({ messageReceived: true },
...
If the state or any other prop apart from lastViewedMessageTime is changed and causes an update then the lastViewedMessageTime prop will be the same in the current props as in the prevProps.
This will cause a state change - therefore an update - and the same will be true about lastViewedMessageTime.
You are already stuck in an endless update cycle.
You should look into static getDerivedStateFromProps or memoization. These should help avoid these issues.