当前位置: 首页 > 知识库问答 >
问题:

React与Object挂钩useState()

武卓
2023-03-14

更新状态的正确方式是什么,是一个嵌套对象,在与钩子反应?

export Example = () => {
  const [exampleState, setExampleState] = useState(
  {masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b"
           fieldTwoTwo: "c"
           }
        }
   })

如何使用setexamplestatexamplestat更新为a(附加字段)?

const a = {
masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }
}

b(更改值)?

const b = {masterField: {
        fieldOne: "e",
        fieldTwo: {
           fieldTwoOne: "f"
           fieldTwoTwo: "g"
           }
        }
   })

共有2个答案

申炳
2023-03-14

如果有人正在搜索useState(),则为object挂起更新

- Through Input

        const [state, setState] = useState({ fName: "", lName: "" });
        const handleChange = e => {
            const { name, value } = e.target;
            setState(prevState => ({
                ...prevState,
                [name]: value
            }));
        };

        <input
            value={state.fName}
            type="text"
            onChange={handleChange}
            name="fName"
        />
        <input
            value={state.lName}
            type="text"
            onChange={handleChange}
            name="lName"
        />
   ***************************

 - Through onSubmit or button click
    
        setState(prevState => ({
            ...prevState,
            fName: 'your updated value here'
         }));
卞轶
2023-03-14

您可以像这样传递新值

  setExampleState({...exampleState,  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }})
 类似资料:
  • 我试图创建一个简单的组件,从Apollo GraphQL服务器(查询)返回我的所有组织。我想从一个上下文状态呈现所有这些组织,在这个上下文状态下,在组件挂载(由useEffect挂钩处理)之后,可以使用分派方法放置这些组织。 如果状态结果(organizations数组)为空,useEffect钩子应该调用函数getOrganizations,然后调用自定义钩子useGetOrganization

  • 有人能解释一下我做错了什么吗?我有一个react功能组件,在其中我使用useEffect钩子从服务器获取一些数据,并将这些数据放入状态值。在获取数据之后,在同一个useHook中,我需要使用该状态值,但由于某些原因,该值是明确的。看看我的示例,console有一个空字符串,但在浏览器上我可以看到该值。 链接到codesandbox。

  • 我正在尝试使用状态将一个表单输入值复制到另一个表单输入值,但状态没有更新 我创建了一个带有按钮的表单,其中左侧表单输入的值应复制到右侧表单输入。这是我的代码: 无论我做什么,dbSecName的状态都不会改变。我试着设置一个新的常量。我尝试使onclick函数异步并等待。如果我为我试图设置的变量的值添加,我可以正确地看到它,但是dbSecName的console.log总是显示原始值。 我真的不知

  • 问题内容: 在带有钩子的React中,更新状态的正确方法是嵌套对象是什么? 一个人怎么会使用到的更新来(附加一个字段)? (改变价值)? 问题答案: 您可以像这样传递新值

  • 我是反应的初学者。我试图将我的数据库的值从一个文件发送到另一个使用反应挂钩,并得到以下错误有人能帮我吗? 第5:41行:不能在顶层调用React钩子“useState”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则代码中调用React钩子:

  • 我正在将Serenity-BDD与cucumber一起使用,并且我想在每个功能文件上只运行一次某些内容。看起来cucumber目前不支持这一点。我想知道宁静是否有一些解决方法。 我还尝试在测试套件类中使用JUnit @BeforeClass,@AfterClass挂钩,但是这两个注释需要静态方法,我当时无法访问serenity page objects方法(当时没有注入实例)。