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

【问题标题】：How do I replace this.setState when using React Hooks?使用 React Hooks 时如何替换 this.setState？
【发布时间】：2021-04-08 14:51:44
【问题描述】：

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

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

【问题讨论】：

您可以使用 useState 挂钩并使用 const [pinError, setPinError] = React.useState(!isValidPin) 之类的东西初始化您的状态，然后使用相应的函数来更新各自的状态！
检查我的答案。快乐编码:)
这能回答你的问题吗？ React: How to use setState inside functional component?

标签： reactjs react-hooks setstate

【解决方案1】：

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

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

【讨论】：

我得到'"PinError' is missing in props validation" for the one--> const PinInput = ({PinError, Pin}) => {
我将您的代码从 'pinError' 更改为 'PinError' 以向您展示差异。无论您解构什么，都必须与所传递的内容完全匹配。如果它变得混乱，我会将它改回“pinError”并重命名钩子。
“别针”也是如此
即使它们都是小写的，我也会得到“标识符'pinError'已经被声明”
那是因为您的州名与正在传递的道具完全匹配。你不能有同名的变量。我将编辑我的代码示例以帮助您。

【解决方案2】：

试试这个：

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

【讨论】：

【解决方案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);
    }
  };
};

【讨论】：

实际上，现在我明白了：标识符 'pinError' 和 'pin' 已经被声明，因为我在这里使用它们： const PinInput = ({pinError, pin, isInputActive}) => {跨度>
我不知道你在说什么。
你在哪里将值名称声明为 pinError 和 pin，
你能在codesandbox上分享代码吗？

【解决方案4】：

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

试试：

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

setPinError(!isValidPin)
setPin(updatedPin)

编码愉快:)

【讨论】：