Компонент не перерисовывается в setState React

Question

Мой компонент не рендерится, когда я устанавливаю состояние. Я попытался установить состояние как родительского, так и дочернего компонента, и он все еще не работает. Я также попробовал this.forceUpdate () .. Не работает ..

Вот мой родительский компонент:

import React, { Component } from "react";
import Header from "./Header";
import Note from "./Note";

class Notes extends Component {
  constructor() {
    super();
    this.state = {
      notes: [],
      reRender: false
    };
  }

  getUserId = () => {
    var str = window.location.pathname;
    var words = str.split("/");
    return words[2];
  };

  handler = () => {
    this.setState({
      reRender: true
    });
  };

  componentDidMount() {
    fetch(`http://localhost:4000/notes?sls_id=${this.getUserId()}`)
      .then(res => res.json())
      .then(res => {
        this.setState({
          notes: res.data
        });
      });
  }

  render() {
    const { notes } = this.state;
    return (
      <div>
        <Header />
        <ul style={{ marginTop: "10px", marginBottom: "10px" }}>
          {Object.keys(notes).map(key => (
            <Note
              key={key}
              index={key}
              details={notes[key]}
              action={this.handler}
            />
          ))}
        </ul>
      </div>
    );
  }
}

export default Notes;

и вот мой дочерний компонент:

import React, { Component } from "react";
import { Card, ListGroup, Button } from "react-bootstrap";

class Note extends Component {
  deleteNote = _ => {
    const prp = this.props.details;
    fetch(`http://localhost:4000/notes/delete?note_id=${prp.note_id}`).catch(
      err => console.error(err)
    );
  };

  render() {
    const prp = this.props.details;

    return (
      <Card style={{ margin: "15px" }}>
        <Card.Header>
          <div className="customerName">{prp.title}</div>
        </Card.Header>
        <Card.Body>
          <blockquote className="blockquote mb-0">
            <p>{prp.body}</p>
            <footer className="blockquote-footer">
              <cite title="Source Title">
                posted on {prp.date.substring(0, prp.date.length - 14)}
              </cite>
            </footer>
          </blockquote>
          <button
            style={{ margin: "15px", width: "150px" }}
            type="button"
            className="btn btn-danger"
            onClick={() => {
              this.deleteNote();
              this.props.action();
            }}
          >
            Delete note
          </button>
        </Card.Body>
      </Card>
    );
  }
}

export default Note;

Я хотел бы выполнить рендеринг моего компонента, когда я нажимаю кнопку на моем дочернем компоненте ...

Answer 1

Так что я думаю, что не могу многое сделать с моей проблемой, так как данные извлекаются из моего API.Когда я нажимаю на мою кнопку, он отправляет запрос на удаление определенной строки в MySql.Но я полагаю, что реакция не влияет на мои данные ... Так что на самом деле это была перерисовка ... но с точно такими же данными ... Я решил установить метод для нарезки массива объектов, который отлично работает:

  updateNotes = key => {
    var newArray = [];
    var { notes } = this.state;
    for (var i = 0; i < notes.length; i++)
      if (notes[i].note_id !== key) newArray.push(notes[i]);
    this.setState({
      notes: newArray
    });
  };

Answer 2

Вместо того, чтобы помещать this.props.action в вашу кнопку, попробуйте добавить ее в deleteNote.

deleteNote = _ => {
this.props.action()
const prp = this.props.details;
fetch(`http://localhost:4000/notes/delete?note_id=${prp.note_id}`).catch(
  err => console.error(err)
);

};