React setState did not rerender the page #165

Anthonykung · 2021-04-05T03:32:32Z

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.

Ming-desu · 2021-04-07T04:53:55Z

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,

Anthonykung · 2021-04-07T19:45:22Z

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?

Ming-desu · 2021-04-09T18:21:44Z

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.

mastercuber55 · 2022-01-28T04:41:11Z

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.

😭

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React setState did not rerender the page #165

React setState did not rerender the page #165

Anthonykung commented Apr 5, 2021

Ming-desu commented Apr 7, 2021

Anthonykung commented Apr 7, 2021 •

edited

Ming-desu commented Apr 9, 2021

mastercuber55 commented Jan 28, 2022

React setState did not rerender the page #165

React setState did not rerender the page #165

Comments

Anthonykung commented Apr 5, 2021

Ming-desu commented Apr 7, 2021

Anthonykung commented Apr 7, 2021 • edited

Ming-desu commented Apr 9, 2021

mastercuber55 commented Jan 28, 2022

Anthonykung commented Apr 7, 2021 •

edited