如何使用钩子设置计算属性的状态答案

【问题标题】：How to setState of computed property using hooks如何使用钩子设置计算属性的状态
【发布时间】：2020-06-16 10:16:32
【问题描述】：

所以我正在更新我的一个旧项目以尽可能使用钩子而不是一直使用状态。我基本上是在重构这个项目，并根据我从那以后学到的东西让它变得更好。

我遇到了这个

handleChange(event){
   setState({ [event.target.name]: event.target.value })
}

我为组件中的其他值创建了一个useState 挂钩，但我不知道如何为计算属性设置状态。

Password: <input className= "userNameBox" type="password" name="password" value={this.state.password} onChange={this.handleChange} onKeyPress={this.enterPressed.bind(this)}></input>

上面是我调用相关方法的地方。

谁能告诉我我会在这个方法中改变什么以便它使用钩子？

【问题讨论】：

你能展示一下你的原始状态是什么样的吗？

标签： javascript reactjs react-hooks

【解决方案1】：

使用钩子，您需要将functional updates 与prevState 一起使用，因为它不会像this.setState 等效项那样与先前的状态合并。

见State Updates Are Merged。

const Component = () => {
  const [value, setValue] = useState({ password: "" });
  const onChange = ({ target: { name, value } }) => {
    setValue((prevState) => ({ ...prevState, [name]: value }));
  };
  return <input name="password" value={value.password} onChange={onChange} />;
};

【讨论】：

当我将我的 handleChange 函数替换为你的函数时，我失去了在文本框中输入的能力。我需要在某处包含事件参数吗？
不要只是复制粘贴解决方案，它是一个通用的答案——就像你问的一个通用问题，你应该展示你如何使用它和你的组件的结构，最好问一个相关的新问题上下文。

【解决方案2】：

首先，你需要从 React 中导入 useState 方法，如下所示。

import React, { useState } from "react";

之后，使用带有初始值的useState方法。

const [state, setState] = useState(null);

最后，只需更新 handleChange 方法。

handleChange(event){
    setState(event.target.value);
}

详情请查看this link。您也可以使用useEffect 方法。当需要多个状态时更好

【讨论】：