javascript - ReactJS check database for changes and update component without refreshing browser - Stack Overflow

admin管理员组

文章数量:1345891

I am having trouble figuring out how I can update the ponent with the new data from the database after the edit function has been run and the update to the database was successful.

I have tried doing this.forceUpdate() but that doesn't work. I heard about using this.setState() but I don't know how I would update it using that with the database as my classroom state is a JSON array.

I have been thinking and google-ing long and hard for days without any luck, so any advice or help with this problem would be greatly appreciated.

P.S. I am using MySQL for my Database. I don't know if that matters.

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      toggle: false,
      toggleIdxArray: [],
      classroom: [],
      childflagged: '',
      flagreason: '',
      id: ''
    };
    this.eventHandler = this.eventHandler.bind(this);
    this.logChange = this.logChange.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  logChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleEdit(event) {
    event.preventDefault()
    var data = {
      childflagged: this.state.childflagged,
      flagreason: this.state.flagreason,
      id: this.state.id
    }
    fetch("/classroom/edit", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
    }).then(function(data) {
      if (data.affectedRows === 1) {
        console.log('Edited Flag!'); //UPDATE COMPONENT FUNCTION OF SOME-SORT HERE
      }
    }).catch(function(err) {
      console.log(err)
    });

  }

  eventHandler(event, idx) {
    let updatedArr = this.state.toggleIdxArray.slice();
    let checkIdx = updatedArr.indexOf(idx);
    if (checkIdx === -1) updatedArr.push(idx);
    else updatedArr.splice(checkIdx, 1);
    this.setState((prevState) => ({
        toggleIdxArray: updatedArr
      })
    );
  }

  ponentDidMount() {
    fetch("/classroom")
    .then(res => res.json())
    .then(classroom => this.setState({ classroom }))
  }

  render() {
    return (
      <div className="App">
                <div className="wrapper">
                    <h1>Classroom</h1>
                    {this.state.classroom.map((classroom, idx) =>
                        <div className="child" key={classroom.id}>
              <p className="detail">Child's Name: <span className={classroom.childflagged}>{classroom.childsname}</span> <i title={classroom.flagreason} className={'fa fa-flag flag' + classroom.childflagged}></i><i title={classroom.starreason} className={'fa fa-star star' + classroom.starstudent}></i></p>
              <p className="detail">Parent's Phone Number: {classroom.parentsnumber}</p>
              <div className="actionMenu">
                <button className="flags" id={classroom.id} onClick={e => this.eventHandler(e, idx)}>Edit Flags</button>
                <button className="results">View Results</button>
                <button className="profile">View Profile</button>
              </div>
              <div className="actionForm">
                <div>
                  <form id={"flagform" + classroom.id} className={this.state.toggleIdxArray.includes(idx) ? '' : 'hide'} onSubmit={this.handleEdit} method="post" autoComplete="no">
                    <input type="hidden" name="id" value={classroom.id} />
                    <input type="text" onChange={this.logChange} value={this.state.childflagged} name="childflagged" placeholder="Flag Type" />
                    <input type="text" onChange={this.logChange} value={this.state.flagreason} name="flagreason" placeholder="Reason For Flag" />
                    <input type="submit" onClick={() => this.state.id = classroom.id} name="submit" value="Save Changes" />
                  </form>
                </div>
              </div>
            </div>
          )}
                </div>
      </div>
    );
  }
}

export default App;

I am having trouble figuring out how I can update the ponent with the new data from the database after the edit function has been run and the update to the database was successful.

I have tried doing this.forceUpdate() but that doesn't work. I heard about using this.setState() but I don't know how I would update it using that with the database as my classroom state is a JSON array.

I have been thinking and google-ing long and hard for days without any luck, so any advice or help with this problem would be greatly appreciated.

P.S. I am using MySQL for my Database. I don't know if that matters.

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      toggle: false,
      toggleIdxArray: [],
      classroom: [],
      childflagged: '',
      flagreason: '',
      id: ''
    };
    this.eventHandler = this.eventHandler.bind(this);
    this.logChange = this.logChange.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  logChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  handleEdit(event) {
    event.preventDefault()
    var data = {
      childflagged: this.state.childflagged,
      flagreason: this.state.flagreason,
      id: this.state.id
    }
    fetch("/classroom/edit", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
    }).then(function(data) {
      if (data.affectedRows === 1) {
        console.log('Edited Flag!'); //UPDATE COMPONENT FUNCTION OF SOME-SORT HERE
      }
    }).catch(function(err) {
      console.log(err)
    });

  }

  eventHandler(event, idx) {
    let updatedArr = this.state.toggleIdxArray.slice();
    let checkIdx = updatedArr.indexOf(idx);
    if (checkIdx === -1) updatedArr.push(idx);
    else updatedArr.splice(checkIdx, 1);
    this.setState((prevState) => ({
        toggleIdxArray: updatedArr
      })
    );
  }

  ponentDidMount() {
    fetch("/classroom")
    .then(res => res.json())
    .then(classroom => this.setState({ classroom }))
  }

  render() {
    return (
      <div className="App">
                <div className="wrapper">
                    <h1>Classroom</h1>
                    {this.state.classroom.map((classroom, idx) =>
                        <div className="child" key={classroom.id}>
              <p className="detail">Child's Name: <span className={classroom.childflagged}>{classroom.childsname}</span> <i title={classroom.flagreason} className={'fa fa-flag flag' + classroom.childflagged}></i><i title={classroom.starreason} className={'fa fa-star star' + classroom.starstudent}></i></p>
              <p className="detail">Parent's Phone Number: {classroom.parentsnumber}</p>
              <div className="actionMenu">
                <button className="flags" id={classroom.id} onClick={e => this.eventHandler(e, idx)}>Edit Flags</button>
                <button className="results">View Results</button>
                <button className="profile">View Profile</button>
              </div>
              <div className="actionForm">
                <div>
                  <form id={"flagform" + classroom.id} className={this.state.toggleIdxArray.includes(idx) ? '' : 'hide'} onSubmit={this.handleEdit} method="post" autoComplete="no">
                    <input type="hidden" name="id" value={classroom.id} />
                    <input type="text" onChange={this.logChange} value={this.state.childflagged} name="childflagged" placeholder="Flag Type" />
                    <input type="text" onChange={this.logChange} value={this.state.flagreason} name="flagreason" placeholder="Reason For Flag" />
                    <input type="submit" onClick={() => this.state.id = classroom.id} name="submit" value="Save Changes" />
                  </form>
                </div>
              </div>
            </div>
          )}
                </div>
      </div>
    );
  }
}

export default App;

• javascript
• reactjs

Share Improve this question Follow edited Dec 1, 2018 at 14:09 Roy Scheffers 3,9081111 gold badges3333 silver badges3636 bronze badges asked Mar 14, 2018 at 22:20 JulianJulian 65733 gold badges99 silver badges3333 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If you get back the data in a useful format after updating it on the database, just use setState with that data:

handleEdit(event) {
    event.preventDefault()
    var data = {
      childflagged: this.state.childflagged,
      flagreason: this.state.flagreason,
      id: this.state.id
    }
    fetch("/classroom/edit", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      if (response.status >= 400) {
        //Aside: because of the way promises work, this is the correct way to throw the error. Doing this you can catch it in the "catch" callback
        Promise.reject(new Error("Bad response from server"));
      }
      return response.json();
    }).then((data) => {
      if (data.affectedRows === 1) {
        console.log('Edited Flag!'); //UPDATE COMPONENT FUNCTION OF SOME-SORT HERE
        //use data to set state
        this.setState({ classroom: data });
      }
    }).catch(function(err) {
      console.log(err)
    });

  }

I fixed this by using:

}.then((data) => {
      console.log('Update Complete');
      this.setState({ classroom: data })
    })                 

You can trigger the ponent re-render by calling setState inside your handleEdit function, after the request finished and data returned:

handleEdit(event) {
    ....
    fetch("/classroom/edit", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(function(response) {
      if (response.status >= 400) {
        throw new Error("Bad response from server");
      }
      return response.json();
    }).then(function(data) {
      if (data.affectedRows === 1) {
        /** Calling setState here
         * For example, if the data return is a classroom object,
         * you can update the classroom property of the state to 
         * reflect it
         */
        this.setState({classroom:[...this.state.classroom, data.classroom]});
      }
    })
    ....
  }

Basically, a react ponent will re-render if:

1. Its props change.
2. Its setState function is called.
3. Its forceUpdate function is called.

More details about this topic can be found here: https://reactjs/docs/state-and-lifecycle.html

本文标签： javascriptReactJS check database for changes and update component without refreshing browserStack Overflow