使用 React Hooks 时如何替换 this.setState？

Question

我正在尝试使用 React Hooks 将我的 class 组件转换为功能组件。我不确定如何处理这段代码：

this.setState({
      pinError: !isValidPin,
      pin: updatedPin,
    });

我在想也许完全删除它？这是我目前所拥有的：

const PinInput = ({pinError, pin, isInputActive}) => {

    const handleValidatePinDigit = (e) => {
        const isValidPin = isValidPinDigit(e.target.value);
        const updatedPin = isValidPin ? e.target.value : '';

    this.setState({
      pinError: !isValidPin,
      pin: updatedPin,
    });

    if (get(updatedPin, 'length', '') === 4) {
      onComplete(updatedPin);
    } else {
      onChange(updatedPin);
    }
  };
};

Answer 1

试试这个：

 const[pinError, setPinError] = useState(true);
 const[pin, setPin] = useState('')

Answer 2

使用 useState 钩子来实现你的目标。

尝试：

const [pinError, setPinError] = useState(false);
const [pin, setPin] = useState('')

setPinError(!isValidPin)
setPin(updatedPin)

编码愉快:)

Answer 3

您不能使用 this.setState 功能。像这样尝试。

import React, { useState } from 'react';



const PinInput = ({pinError, pin, isInputActive}) => {

     const [pinError, setPinError] = useState(pinError);
     const [updatedPin, setUpdatedPin] = useState('');
    const handleValidatePinDigit = (e) => {
        const isValidPin = isValidPinDigit(e.target.value);
        const updatedPin = isValidPin ? e.target.value : '';
        setPinError(!isValidPin);
        setUpdatedPin(updatedPin);
    if (get(updatedPin, 'length', '') === 4) {
      onComplete(updatedPin);
    } else {
      onChange(updatedPin);
    }
  };
};

Answer 4

这应该可以帮助您了解如何使用 useState 挂钩初始化、设置和使用状态。也请阅读评论。

import React, { useState } from 'react';


// pinError & pin are deconstructed state passed down and are used as the initial values of your pinError & pin state
const PinInput = ({pinError, pin}) => {

    const [newPinError, setNewPinError] = useState(pinError); // initialize state
    const [newPin, setNewPin] = useState(pin);

    const handleValidatePinDigit = (e) => {
        const isValidPin = isValidPinDigit(e.target.value);
        const updatedPin = isValidPin ? e.target.value : '';

        setNewPinError(!isValidPin); // set state 
        setNewPin(updatedPin);       
    };

    // this printPin function shows how to use state 
    const printPin = () => {
        if (newPinError) { 
            console.log("[pinError] Your invalid pin is: " + newPin);
        } else {
            console.log("Your valid pin is: " + newPin);
        }
    }
};

使用 React Hooks 时如何替换 this.setState？

How do I replace this.setState when using React Hooks?

setstate

reactjs

react-hooks