reactjs
React setState did not rerender the page
Hi, I'm having trouble getting the page rerendered with updated data. I have an array of arrays and I would like to render just 1 array at a time with some button to change the state to the next array. But I don't seem to be able to do this with the view engine for some reason, is it not supported?
I have made this simple component to test state change that increments an index
import React from 'react';
export class Test extends React.Component {
constructor(props) {
super(props);
this.state = { index: 0 };
this.increment = this.increment.bind(this);
}
increment() {
let idx = this.state.index + 1;
if (idx > 10) {
idx = 10;
}
this.setState({ index: idx});
}
render() {
return (
<div>
<h1>
Index: {this.state.index}
</h1>
<br />
<button onClick={this.increment}>
Increment
</button>
</div>
);
}
}
And this function that returns JSX
const React = require('react');
import { Body } from './default';
import { Test } from './test';
export default function TestFunction(props) {
return (
<Body>
<Test />
</Body>
);
}
It works on React editors but when rendering with the express view engine it doesn't work at all. I'm limited to express due to the nature of my project.
I think the reason why it is not re-rendering your component based on their state is that express-react-views are meant only for server-side rendering,
Oh I see, so the only way that I can do something like this is to send a POST request and change it right? Is there another efficient way to render an array of arrays one at a time?
Yep, that is my current solution as well. I think it is impossible for a server side rendering to have a reactive state. Since the re-rendering process only occurred in client side with React itself that is why I think it is impossible to have an automatic re-rendering when the state changes, unless you will trigger it manually via JavaScript.
Yep, that is my current solution as well. I think it is impossible for a server side rendering to have a reactive state. Since the re-rendering process only occurred in client side with React itself that is why I think it is impossible to have an automatic re-rendering when the state changes, unless you will trigger it manually via JavaScript.
😭
