Reactjs：将两个useState值作为output

Question

我有一个 function 接受用户输入（字符串）并将每个字母转换为数字然后返回它们的总和。 我还有另一个 function 检查总和是否为素数。

const [data, setData] = useState([])
    const [result, setResult] = useState([])
    const [prime, setPrime] = useState([])
    
    function getData(val) {
        let value = val.target.value
        value = value.replace(/[^A-Za-z]/ig, '')
        setData(value)
        console.warn(value)
    }


    function calculate() {
        var result = 0
        for (var i=0; i<data.length; i++) {
            result += data[i].charCodeAt(0) - 96
        }
        setResult(result)
    }

    function isPrime() {
        var prime = ''
        for (var i = 2, s = Math.sqrt(result); i<s; i++) {
            if (result % i == 0 || result <= 1) {
                prime = ' which is not a prime number'
            } else  {
                prime = ' which is a prime number'
            }
        }
        setPrime(prime)
    }

    function finalOutput() {
        calculate()
        isPrime()
    }

我有一个带有 onClick 事件（finalOutput）的按钮，但我的网页上似乎没有显示 useState prime。

<form>
    <input type="text" name="input" placeholder="Input Letters" className="footer-input" onChange={getData} />
    <Button type="button" onClick={finalOutput}>Calculate</Button>
</form>

<p>{result}{prime}</p>

Answer 1

我认为这是因为 setResult 是异步工作的。 因此，在 isPrime function 中使用的结果 state 还没有值，因为这个 function 会立即执行。 因此在 setPrime 中设置了一个空字符串。

对于解决方案，您可以像这样使用 useEffect ：

    useEffect(() => {
    // check if result is empty
    if (result.length !== 0) {
      isPrime();
    }
  }, [result]);

在上面的代码中，当结果 state 发生变化时运行 useEffect，并且在 useEffect 内部，当结果不为空时调用 isPrime function。

还有其他方法也可以使用 Promise，但我认为应该这样做。

Answer 2

据我了解，您的输入只需要字母字符（大写和小写），而不是数字。 而且，当您单击计算按钮时，您会希望得到数字格式的结果（通过将字母转换为相应的数值）。 您可以首先更改状态以保存正确的初始值，因为值result和prime最后保存一个数字和一个字符串，将它们的初始状态设置为null和''或0会更有意义和'' 。

    const [data, setData] = useState([])
    const [result, setResult] = useState(null) //Null, if you are rendering the initial value on the screen
    const [prime, setPrime] = useState('') //Empty string

在您的getData function 中，您没有在每次击键时正确地在 state 数组上附加值。 将 append 值添加到数组中的正确和好的方法是使用扩展运算符（ ... ），您可以获取先前的值和 append 新接收到的值到数组中。 另外，请确保不要将 append 空字符串值添加到数组中，因为空字符串的charCodeAt(0)返回NaN 。

function getData(val) {
        let value = val.target.value.trim()
        value = value.replace(/[^A-Za-z]/ig, '')
        if(value!==''){
           setData(prev=>[...prev,value]) //Appending new value using spread operator
        }
        console.warn(value)
}

此外，您需要在calculate function 中调用isPrime ，因为设置 state 是异步过程，您将无法立即捕获设置值。 更新您的isPrime function 以接受结果作为参数。

function calculate() {
        var result = 0
        for (var i=0; i<data.length; i++) {
            result += data[i].charCodeAt(0) - 96
        }
        setResult(result)
        isPrime(result)
}

来到isPrime function，看起来还不错。 现在，未使用finalOutput function，您可以改为让按钮单击侦听器指向calculate function。 总而言之，您的组件应该看起来像这样：

export default function Component(){
 const [data, setData] = useState([])
    const [result, setResult] = useState(null)
    const [prime, setPrime] = useState('')
    
    function getData(val) {
        let value = val.target.value
        value = value.replace(/[^A-Za-z]/ig, '')
        // console.log(value)
        setData(prev=>[...prev,value])
        // console.warn(value)
    }


    function calculate() {
        var result = 0
        for (var i=0; i<data.length; i++) {
            result += data[i].charCodeAt(0) - 96
        }
        // console.log(result)
        setResult(result)
        isPrime(result)
    }

    function isPrime(res) {

      
        var prime = ''
        for (var i = 2;,s = Math.sqrt(result);i<=s; i++) {
            if (res % i === 0 || res <= 1) {
                prime = ' which is not a prime number'
            } else  {
                prime = ' which is a prime number'
            }
        }
        setPrime(prime)
    }

    
  return (
    <div className="App">
      <form>
         <input type="text" name="input" placeholder="Input Letters" className="footer-input" onChange={getData} />
         <button onClick={calculate}>Calculate</button>
      </form>

     <p>{result}{prime}</p>
   </div>
  );
}