时间戳

首页 > 解决方案 > ReactJs - 调用 setState 后不呈现更新

javascript - ReactJs - 调用 setState 后不呈现更新

问题描述

我有以下 React 组件。我对反应比较陌生，所以我没有牢牢掌握使用钩子的所有概念。

我已经看到其他一些问题指向 setState 函数的异步性质，但这似乎不是这里的问题。

对代码的期望：我希望当用户在 fName 和 lName 输入中输入值时，h1 会自动更新和呈现

实际发生的情况：当我在输入中输入值时，键入的值不会显示在 UI 的输入字段中。标题 (h1) 也不会更新。

附加说明：如果我使用“if”语句检查并有条件地更新对象的相应属性，而不是使用 prevState[name] = value;，则代码按预期工作。在 setHeadingText 中。

import React, {useState} from "react";

function App() {

  const [headingText, setHeadingText] = useState({
    fName: "",
    lName: ""
  });


  function handleChange(e){

    const {name, value} = e.target;
    
    setHeadingText(prevState => {
      prevState[name] = value;
      return prevState;
    })
  }

  return (
    <div className="container">
      <h1>Hello {headingText.fName + " " + headingText.lName}</h1>
      <input type="text" name="fName" placeholder="First Name" value={headingText.fName} onChange={handleChange}/>
      <input type="text" name="lName" placeholder="Last Name" value={headingText.lName} onChange={handleChange}/>
      <button>
        Submit
      </button>
    </div>
  );
}

export default App;

标签： javascriptreactjs

解决方案

您不是在更新对象的身份，而是在内部更新对象。React 看不到这种变化。

将 fName 和 lName 分离为单独的状态原子，或者将整个状态对象更新为一个新对象，而不是在内部对其进行变异：

setHeadingText(prevState => ({...prevState, [name]: value}))

推荐阅读