Question

有一个类组件，需要重新制作才能正常运行，而需要重新制作状态才能使用useState挂钩。但是状态几乎没有属性：

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>
    );
  }
}

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

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

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

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

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

Answer 1

您可以在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略有不同。 setValue将替换整个值，就像这样...

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

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

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

const [value, setValue] = useState({
    a: "Hello",
    b: "World"
})

setValue({
    a: "Goodbye"
})

// value = { a: "Goodbye" }

您也可以将多个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");

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

如果在我的情况下状态很少，如何将类组件重新构造为功能并状态为useState？

1 个答案: