Reactjs 使用React钩子时如何替换此.setState？

我正在尝试使用React钩子将类组件转换为函数组件。 我不确定如何处理此代码段：

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

试试这个：

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

用钩子来实现你的目标

尝试：

---

快乐编码：）

您不能使用此.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);
    }
  };
};

---

这将帮助您了解如何使用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);
        }
    }
};

---

您可以使用useState钩子并使用类似于

const[pinError，setPinError]=React.useState（！isValidPin）

的内容初始化状态，然后使用相应的函数更新相应的状态！检查我的答案。快乐编码：）这能回答你的问题吗？事实上，现在我明白了：标识符'pinError'和'pin'已经被声明了，因为我在这里使用它们：const PinInput=（{pinError，pin，isInputActive}）=>{我不知道你在说什么。你在哪里声明了值名称为pinError和pin，你能在codesandbox上共享代码吗？我得到了''pinError'在道具验证中丢失了'对于-->const PinInput=（{PinError，Pin}）中的一个=>{我将您的代码从'PineError'更改为'PineError'以显示差异。您解构的任何内容都必须与传递的内容完全匹配。如果混淆，我会将其更改回'PineError'并重命名挂钩。对于'pin'也一样，即使它们都是小写的，我也会得到“标识符'PineError'已声明”这是因为您的州名称与正在传递的道具完全匹配。您不能有同名的变量。我将编辑我的代码示例以帮助您。

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