Reactjs 如果在我的例子中，我的状态中几乎没有属性，如何将类组件重新生成为functional，将状态重新生成为useState？

有一个类组件需要重制为functional，而状态重制为useState hook。但州政府几乎没有什么属性：

class App extends React.Component {

  state = {
    num: 0,
    text: 'no',
    textUpper: 'HELLO'
  }

  changeState = () => {
    this.setState({
      num: this.state.num + 1,
      text: "yes",
      textUpper: 'BYE'
    });
  }

  render() {
    return (
      <div>
          <button onClick={this.changeState}>like</button>
          {this.state.num}
          {this.state.text}
          {this.state.textUpper}
      </div>
    );
  }
}

类应用程序扩展了React.Component{
状态={
数字：0，
文本：“否”，
短信：“你好”
}
changeState=（）=>{
这是我的国家({
num:this.state.num+1，
文本：“是”，
短信：“再见”
});
}
render（）{
返回(
喜欢
{this.state.num}
{this.state.text}
{this.state.textUpper}
);
}
}

我知道，如果它只是一个属性，它看起来是这样的：

const App = () => {
      const [num, setNum] = useState(0);

      const changeState = () => {
           setNum(num+1);
       }

    return (
      <div>
            <button onClick={changeState}>like</button>
           {num}
      </div>
    );
}

const-App=（）=>{
const[num，setNum]=useState（0）；
constchangestate=（）=>{
setNum（num+1）；
}
返回(
喜欢
{num}
);
}

---

但是，当我的属性很少时，我不知道如何重新制作我的组件。请告诉我。

您可以在useState中将对象用作值

// Set up your state
const [value, setValue] = useState({
   num: 0,
   text: "no",
   textUpper: "HELLO"
});

// Later on to update
setValue({
    num: value.num + 1,
    text: "yes",
    textUpper: "BYE"
});

但是需要注意的一点是，使用

setValue

与

this.setState

略有不同<代码>设置值将替换整个值，如下所示

this.state = {
    a: "Hello",
    b: "World"
}

this.setState({
    a: "Goodbye"
})

// this.state = { a: "Goodbye", b: "World" }

您也可以使用带有单个值的多个

useState

挂钩

// Set up your state
const [num, setNum] = useState(0);
const [text, setText] = useState("no");
const [textUpper, setTextUpper] = useState("HELLO");

// Later on to update
setNum(num + 1);
setText("yes");
setTextUpper("BYE");

---

确定最佳方法实际上取决于您和您的用例。祝你好运

这回答了你的问题吗@阿努拉格·斯利瓦斯塔瓦：不，这和我的问题大不相同！你看了另一个问题吗？还是只看标题？在那里，他通常询问注册问题。状态中有多个值，答案显示了如何在功能组件中实现这一点。或者你是在期待从头开始编写功能组件的演练吗？@Anurag Srivastava我想看看如果我的组件是双功能的，我的组件会是什么样子，但是想象一下，当我单击按钮时，我需要更改状态的所有属性。因此，请告诉我如何将我的组件转换为functionalOk，更新了第一个和最后一个代码块，以显示如何根据您的问题更新状态。如果我这样写：我有以下错误：

第24:8行：“num”未定义未定义未定义第25:8行：“text”未定义未定义未定义第26:8行：“textUpper”未定义未定义未定义

为什么？因为您的状态现在继续在

值内

。第24、25和26行需要更新：

{value.num}{value.text}{value.textUpper}

。

// Set up your state
const [num, setNum] = useState(0);
const [text, setText] = useState("no");
const [textUpper, setTextUpper] = useState("HELLO");

// Later on to update
setNum(num + 1);
setText("yes");
setTextUpper("BYE");