组件未在 setState React 上重新渲染

Posted 2023-02-22

【中文标题】组件未在 setState React 上重新渲染

【英文标题】：Component not re rendering on setState React

【发布时间】：2019-08-10 15:06:48

【问题描述】：

当我设置状态时，我的组件没有重新渲染。我试图在父组件和子组件上设置状态，但它仍然不起作用。我也试过 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;

当我按下子组件上的按钮时，我想重新渲染我的组件...

【问题讨论】：

你怎么知道它没有重新渲染？您是否尝试将console.log 放入render 函数中？

【参考方案1】：

与其将 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)
);

;

【讨论】：

它不起作用：/我应该注意我的组件是基于从 api 获取的数据。也许这就是它不起作用的原因......我的意思是可能必须重新触发 componentDidMount 或其他什么？

啊，废话，我不确定，你能不能试着把整个 deleteNote 扔到父组件里，然后把它传下去？

【参考方案2】：

所以我认为我无法解决我的问题，因为数据是从我的 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
    );
  ;