Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72358

react app does not rerender immediately only after second update [closed]

$
0
0

This is the start of an App class in a react app of a todo list, the app currently getting the user data from the server in "componentDidMount" and re-getting it in "componentDidUpdate" after every post request but I can only see the changes after I make another call (then I see the first change and not the second). I need to see the changes immediately... any ideas? (Thank you so much in advance)

here's the code:

    class App extends Component {
          constructor(props) {
            super(props);
            this.state = {
              expand: null,
              intervalIsSet: null,
              user: null,
              currentList: 0
            };
            this.create = this.create.bind(this);
            this.update = this.update.bind(this);
            this.toggleCompletion = this.toggleCompletion.bind(this);
            this.remove = this.remove.bind(this);
            this.handleExpandClick = this.handleExpandClick.bind(this);
            this.handleChangeCurrentList = 
            this.handleChangeCurrentList.bind(this);
            this.handleAddList = this.handleAddList.bind(this);
            this.handleRemoveList = this.handleRemoveList.bind(this);
            this.handleListNameUpdate = this.handleListNameUpdate.bind(this);
            this.copyPlannedTodo = this.copyPlannedTodo.bind(this);
            this.handleChangeColor = this.handleChangeColor.bind(this);
            this.handleAlertedTodo = this.handleAlertedTodo.bind(this);
            this.handleChangeLang = this.handleChangeLang.bind(this);
          }

          componentDidMount() {
            this.getUserFromDb();
          }

          componentDidUpdate() {
            if(this.state.boolean) {
              this.getUserFromDb();
              this.setState({boolean: false});
            }
          }

          getUserFromDb = () => {
            //let getUrl = "daymaker/" + document.getElementById('userId').innerHTML;//after build
            let getUrl = window.location.href.slice(0, 20) + "1/daymaker/5e4c290492d81d7474b1af01";//before build


            axios.get(getUrl).then((res) => {
              this.setState({ user: res.data.userData });
            });
          };

          create(newTodo) {
            let getURL = "daymaker/putData";
            axios.post(getURL, {
              userId: this.state.user._id,
              todo: newTodo,
              currentList: this.state.currentList
            });
            this.setState({boolean: true});
          }

Viewing all articles
Browse latest Browse all 72358

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>