React Filter State Not Rerendering

Question

I have a handle delete that makes a request to a service.

  handleDelete = async studentId => {
    try {
      await axios.delete(`/students/${studentId}`).then(() =>
        this.setState({
          students: this.state.students.filter(
            student => student._id !== studentId
          ),
        })
      )
    } catch (e) {
      console.log(`Error: ${e}`)
    }
  }

When I commit out the a axios.delete and just call this.setState it does filter like I want it to.

Why is it that I can't force a rerender of the state with the new data?

Edit: this is my function on the backend to delete.

exports.deleteStudent = async (req, res) => {
  try {
    await Student.findByIdAndRemove(req.params.studentId)
    res.status(204)
  } catch (e) {
    console.log(`Error: ${e}`)
  }
}

Shubham Khatri · Accepted Answer · 2018-05-09T19:35:49.043

1

Since you are using async-await, you need to resolve the promise. Also make use of functional setState.

handleDelete = async studentId => {
    try {
        await axios.delete(`/students/${studentId}`)
        this.setState(prevState => ({
          students: prevState.students.filter(
            student => student._id !== studentId
          )
        }))
    } catch (e) {
      console.log(`Error: ${e}`)
    }
  }

Check this for more details on when to use functional setState

edited May 09 '18 at 19:35

answered May 09 '18 at 19:17

Shubham Khatri

270,417
55
406
400

do you get an error or something, can you log state in setState callback – Shubham Khatri May 09 '18 at 19:21
`this.setState(prevState => ({ students: prevState.students.filter( student => student._id !== studentId ) }), () => console.log(this.state))` – Shubham Khatri May 09 '18 at 19:27
OK that doesn't return anything. inside the try I did a console.log(this.state): students [{_id: "5af34c96eb003d0a7476bd0c", name: "", username: "", email: "", notes: "", …}] Thats a cleaned up version. – Joseph Chambers May 09 '18 at 19:34
Do you get the `res`, if not just try the edited answer – Shubham Khatri May 09 '18 at 19:36

React Filter State Not Rerendering

1 Answers1