ReactuseState()，為什么不能更新之前的值物件直接回傳

我嘗試了以下代碼，但它不起作用，我不太明白它的原因。想要顯示名字、姓氏和電子郵件。但是使用以下代碼它不會呈現。

// prevValue[name] = value;
// return prevValue;

我知道更好的選擇是使用傳播方法。但只是想知道為什么它不呈現？

預期結果：

import React, {
  useState
} from "react";

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

  function handleContact(event) {
    const {
      value,
      name
    } = event.target;

    setContact((prevValue) => {
      // prevValue[name] = value;
      // return prevValue;

      /*Logged result
      {fName: "a", lName: "", email: ""}
      {fName: "s", lName: "", email: ""}
      {fName: "d", lName: "", email: ""}*/

      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName,
          email: prevValue.email
        };
      }
    });
    /*Logged result
    {fName: "", lName: "", email: ""}
    {fName: "a", lName: "", email: ""}
    {fName: "as", lName: "", email: ""}*/
    console.log(contact);
  }

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

export default App;

uj5u.com熱心網友回復：

您必須通過重新創建或迭代來通知 dom，該物件已被更改。請參閱下面的片段。

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

  function handleContact(event) {
    const { value, name } = event.target;
    setContact((prevValue) => {
      prevValue[name] = value;
      return { ...prevValue };
    });
  }
  return (
    <div className="container">
      <h1>
        Hello {contact.fName} {contact.lName}{" "}
      </h1>
      <p> {contact.email} </p>
      <form>
        <input
          name="fName"
          placeholder="First Name"
          value={contact.fName}
          onChange={handleContact}
        />
        <input
          name="lName"
          placeholder="Last Name"
          value={contact.lName}
          onChange={handleContact}
        />{" "}
        <input
          name="email"
          placeholder="Email"
          value={contact.email}
          onChange={handleContact}
        />{" "}
        <button> Submit </button>
      </form>
    </div>
  );
}

// Render it
ReactDOM.render(
    <App />,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

uj5u.com熱心網友回復：

當你呼叫時setContact，你會得到 state 的前一個值作為引數

您可以選擇使用之前的 state 值來回傳新的所需 state 值contact

為了設定名字，你可以做這樣的事情

setContact(prev => {...contact, firstName: value})

所以onChange處理程式<input />可以是

const handleFirstNameChange = () => {
   setContact(prev => {...contact, firstName: value})
}

但是您不想為 撰寫三個這樣的處理程式firstName，lastName而emailAddress只是為了更新您的聯系狀態變數

所以你可以寫一個像

const handleContactChange = (attr, val){
   setContact(prev => {...contact, attr: val})
}

標籤：反应反应钩子rxjs

上一篇：后續請求產生SyntaxError:"[objectObject]"isnotvalidJSONReactQuery

下一篇：標簽<>在此瀏覽器中無法識別。如果您打算渲染一個React組件，請以大寫字母開頭