Question

import React, { useState } from "react";

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function handleChange(event) {
    const { name, value } = event.target;
    console.log(name, value);
    setContact((prevValue) => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName,
          email: prevValue.email
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lName: value,
          email: prevValue.email
        };
      } else if (name === "email") {
        return {
          fName: prevValue.fName,
          lName: prevValue.lName,
          email: value
        };
      }
    });
  }

  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}
      </h1>
      <p>{contact.email}</p>
      <form>
        <input onChange={handleChange} name="fName" placeholder="First Name" />
        <input onChange={handleChange} name="lName" placeholder="Last Name" />
        <input onChange={handleChange} name="email" placeholder="Email" />
        <button>Submit</button>
      </form>
    </div>
  );
}

export default App;

这是我的问题的示例代码。我有一个 JS 对象作为状态变量。如果我只更改电子邮件会怎样？只有段落元素会被重新渲染，或者段落和 h1（因为整个 JS 对象在 setContact 中被改变）都会被重新渲染

Answer 1

在你的情况下，一切。

  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

因为您正在更改整个对象，这是正确的方法。

如果你使用单独的状态

  const [fName, setFname] = useState("")
  <H1Component fName={fName} />

如果只更改 fName，则 H1Component 将呈现。

对于任何组件，如果它的 state 或 prop 发生变化，它会重新渲染。然后你问下一个问题，孩子们会得到重新渲染吗？重复这个过程。

React 组件重新渲染

1 个答案: