React 基础 - 更新 var 并在渲染中使用它不起作用

Question

ReactJS 新手，有 android 经验

我只是在输入更改时将一个值设置为变量并在显示中使用它

但是输入冻结并且新值也没有应用

我还在 render 函数之外声明了 var msg，所以它不会每次都被初始化

这当然不是反应的工作方式，我犯了一个微不足道的错误，但它可能是如此微不足道，以至于没有答案

我究竟做错了什么

import React, { useState } from "react";

import ReactDOM from "react-dom";

import "./styles.css";

var msg = "initial value";

const Message = () => {

  return (

    <div>

      <input

        type="text"

        value={msg}

        placeholder="Enter a message"

        onChange={(e) => {

          alert(e.target.value);

          msg = e.target.value;

        }}

      />

      <p>

        <strong>{msg}</strong>

      </p>

    </div>

  );

};

const rootElement = document.getElementById("root");

ReactDOM.render(<Message />, rootElement);

这是现场演示的链接

https://codesandbox.io/s/usestate-01-forked-f2vdq?file=/src/index.js:0-543

Answer 1

React 不会跟踪你的变量，所以你永远不会看到更新。您需要使用组件状态，这将使 React 意识到它并在它发生变化时触发渲染。我已经更新了您的代码以使用挂钩useState：import React, { useState } from "react";import ReactDOM from "react-dom";import "./styles.css";var msg = "initial value";const Message = () => {&nbsp; const [message, setMessage] = useState(msg);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; value={message}&nbsp; &nbsp; &nbsp; &nbsp; placeholder="Enter a message"&nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(e.target.value);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setMesage(e.target.value);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; <strong>{msg}</strong>&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; );};const rootElement = document.getElementById("root");ReactDOM.render(<Message />, rootElement);我们根据msg值设置初始内部状态，然后在更改时更新该内部状态，这将导致重新渲染

Answer 2

没有任何东西告诉 React 它需要重新渲染组件。变量已更改，但它没有监视变量。这就是状态的目的。更改状态明确地通知 React 它需要检查 DOM 中是否应该更新任何内容。使用状态挂钩定义变量。const Message = () => {  let [msg, setMsg] = useState("initial value");  return (    <div>      <input        type="text"        value={msg}        placeholder="Enter a message"        onChange={(e) => {          alert(e.target.value);          setMsg(e.target.value);        }}      />      <p>        <strong>{msg}</strong>      </p>    </div>  );};

Answer 3

通常，变量只包含在使用它们的类中，而不是创建一个全局变量。 状态是一个数据对象，它包含该类的实例需要使用的任何内容。您有一个message组件，因此，如果我们让它在其状态中存储一条消息，则该消息值将在函数中的任何地方使用，render()无论何时使用。所以，我们可以做value={this.state.msg}，以及<h1>{this.state.msg}</h1>。 状态和组件生命周期是良好 ReactJS 开发的关键。正如我们所说，React 是有状态的。如果你 put value="hello!"，它对 ReactJS 来说和 put 是一样的<h1>hello!</h1>。除非状态说因为调用而改变setState()，ReactJS 认为显示中的任何内容都没有理由改变。只有通过value={this.state...}并且<h1>{this.state....}</h1>我们才能使任何事物充满活力。如果您创建这样的状态，请注意我们正在设置默认值...constructor(props) {  super(props);  this.state = {'msg':'Initial Message'};}然后在你的输入中，你可以显示它，比如......<input    type="text"    value={this.state.msg}还有在价值的展示上，比如...<strong>{this.state.msg}</strong>