在 React 中更新 useState 后如何重新渲染？

Question

我想要的是，在我按下按钮后，useState 已经刷新，我想刷新内容。

这是我的代码：

import React, {useState, useEffect} from 'react';
import MessComponents from './messConatiner';


function Conatiner() {
  const [messes, setMesses] = useState([
    {name: "Chater1: ", mess: "Hi", status: "left"},
    {name: "", mess: "Hi!", status: "right"},
    {name: "Chater2: ", mess: "I have some trouble with react...", status: "left"}
  ]);

  function Send(){
    let list = messes;
    list.push({name: "", mess: document.querySelector("input").value, status:             "right"});
    setMesses(list);
    console.log(messes);
    }

  return (
    <div className="container" id="cont">
        <MessComponents messes={messes}/>
        <input className="chat-input" type="text" /> 
        <button onClick={Send}>Send</button>
    </div>
  );
}

export default Conatiner;

Answer 1

每当您调用 setMesses() 时，这将自动 re-render。要补充的一件事是函数发送应该是小写的，只大写组件而不是常规函数。
问题是您试图直接改变语句中的数组 list.push()

尝试使用这个而不是 push

let list = [...messes, {name: "", mess: document.querySelector("input").value, status:  "right"} ]
setMesses(list)

在 React 中更新 useState 后如何重新渲染？

How to re-render after updating useState in React?

javascript

reactjs

react-hooks