我的React应用程序有问题。我正在尝试使用React Hooks重写代码。但在使用useState钩子时，我的值不会像使用setState时那样在“概述”页面上更新。代码摘录如下。App.js：

const App = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    phone: "",

    schoolName: "",
    studyTitle: "",
    completion: "",
    studyStartDate: "",
    studyEndDate: "",

    companyName: "",
    positionTitle: "",
    mainTasks: "",

    isFormSaved: false,
    btnText: "Save info"
  });

  const handleButtonClick = () => {
    setValues({
      isFormSaved: !values.isFormSaved
    });

    if (!values.isFormSaved) {
      setValues((values) => ({ ...values, btnText: "Edit info" }));
    } else {
      setValues((values) => ({ ...values, btnText: "Save info" }));
    }
  };

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const overview = (
    <section className="overview">
      <Overview data={values} />
    </section>
  );

  const form = (
    <section className="editInfo">
      <GeneralInfo
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
      <Experience
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
      <Practice
        onChange={handleChange}
        disabled={values.isFormSaved}
        placeholder={values}
      />
    </section>
  );

  return (
    <div className="app">
      <h1>CV Application</h1>
      {values.isFormSaved ? overview : form}
      <button onClick={handleButtonClick}>{values.btnText}</button>
    </div>
  );
};

export default App;

Overview.js：

export default function Overview(values) {
  return (
    <div>
      <section>
        <h2>Personal information</h2>
        <p>Name: {values.data.name}</p>
        <p>Email: {values.data.email}</p>
        <p>Phone Number: {values.data.phone}</p>
      </section>
      <section>
        <h2>Educational experience</h2>
        <p>School name: {values.data.schoolName}</p>
        <p>Title of study: {values.data.studyTitle}</p>
        <p>Graduated: {values.data.completion}</p>
        <p>
          Date of study: {values.data.studyStartDate} -{" "}
          {values.data.studyEndDate}
        </p>
      </section>
      <section>
        <h2>Practical Experience</h2>
        <p>Company name: {values.data.companyName}</p>
        <p>Position title: {values.data.positionTitle}</p>
        <p>Main tasks: {values.data.mainTasks}</p>
      </section>
    </div>
  );
}

和其中一个组件文件- Practice.js：

export default function Practice(values) {
  return (
    <form>
      <fieldset>
        <legend>
          <strong>EXPERIENCE</strong>
        </legend>
        <label>
          Company name:
          <input
            type="text"
            id="companyName"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.companyName}
          />
        </label>
        <label>
          Position:
          <input
            type="text"
            id="positionTitle"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.positionTitle}
          />
        </label>
        <label>
          Main tasks:
          <input
            type="text"
            id="mainTasks"
            onChange={values.onChange}
            disabled={values.disabled}
            placeholder={values.placeholder.mainTasks}
          />
        </label>
      </fieldset>
    </form>
  );
}

我应该使用useEffect让值的更改反映在我的站点上吗？

提前感谢您的回答。

转载请注明出处:http://www.jlunlp.com/article/20230331/2265633.html

随机推荐

  1. react句柄值更改

    我有一个反应代码。有一个单选按钮。当选择一个值时，将调用“handleChange”方法。正确打印新的单选按钮选定值。在handlechange中，我无法将值传递给updateCustomerConfiguration。此方法将调用我的ed...

  2. React - checkbox值是未定义的，尽管有一个默认值

    我有一个小问题，如果输入框没有被触摸，那么在第一个复选框之后选中的所有复选框上的size和maxArrayElements都是未定义的。如果未被触摸，它们都被设置为默认的1。因此，在沙箱中，选择一个数据模式，selectorField，选中...

  3. 将React表单值保存到firebase实时数据库

    我已经完成了这段代码，它在编写console.log()方法时正确地显示了控制台输出，但它没有将代码存储到我的数据库中。它没有显示任何其他错误，但没有将数据存储到数据库，所以请告诉我如何更改以存储到数据库。代码如下：import React...

  4. 更改属性值时，React不会重新渲染组件

    谁能给我解释一下为什么在这个例子中，在Component1更新自己的状态后，Component2没有改变背景颜色?我将背景颜色作为一个值从其他组件的状态传递给组件作为道具，但它不能像我预期的那样工作。当你在边框上点击一次，新渲染的框应该会在...

  5. 如何编辑本地存储值react？

    我有两个组件Display.jsx和DisplayList.jsx。组件协同工作以显示本地存储中的值。问题出在DisplayList.JSX handleEdit()方法切片上。Github project我的想法是：我在这个论坛上问了如何...

  6. React bootstrap - Dropdown值在handleSelect上不会更改

    在选择在页面上呈现正确的数据后更改下拉标题时出现问题。我登陆这个页面与下拉列表中选择的选项作为道具。但是，当我试图从下拉列表中更改其他选项时，它会返回到从属性中选择的选项。但是如果我直接转到这个页面，下拉菜单中的第一个选项是选中的，并且不能...

  7. 在react-select中选择选项时，输入值不会更改

    我正在使用react-select在我的react应用程序中定义一个选择输入控件。这就是我使用组件的方式：Select onChange={function(e) {console.log(e)}} options={[ ...

  8. react路由器渲染方法中的Props值不会随Firebase firestore onsnapshot实时更新而更新

    const [documents, setDocuments] = useState() useEffect(()={ const unsubscribe = firebase .firestore() ...

  9. 如何只访问React Redux值一次？

    我只想从redux存储中获取一次值，并在useEffect函数中使用它一次。但是，useSelector需要在组件的根级别上，因此每次渲染都会运行它。这意味着如果我的redux存储中的值被更新，所有子组件也会被更新。我不希望这样的事情发生。...

  10. 异步函数中的React钩子值未更新

    我正在尝试用下面的代码验证使用钩子的字段：const validate = async () = { if (!new ValidateFields().checkIfValidSnn(snn.value))...