Reactjs：将两个useState值作为output

Question

I have a function that takes a user input (strings) and convert each letters into numbers then returns the sum of them. I also have another function that checks if the sum is prime or not.

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

I have a button with the onClick event (finalOutput) but useState prime doesn't seem to show up on my webpage.

<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

I think this is happening because setResult works asynchronously. So the result state used in isPrime function does not have the value yet as this function is executed immediately. Therefore an empty string is being set in setPrime.

For the solution you can use useEffect like this:

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

In the above code useEffect runs when result state changes and inside the useEffect, isPrime function is called when result is not empty.

There are other ways too like using promises but I think this should do it.

Answer 2

As far as I've understood, your input takes only alphabetic characters (both upper case and lower case), but not numbers. And, when you click on the calculate button, you'd want the result in numeric format (by converting alphabets into their corresponding numeric values). You can firstly begin by changing the states to hold the correct initial values, since, the values result and prime hold a number and a string in the end, it'd make more sense to have their initial states be null and '' or 0 and '' .

    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

In your getData function, you are not correctly appending values on the state array on each keystroke. The correct and good way to append values to the array would be to use the spread operator( ... ), you can get hold of the previous values and append the newly received value to the array. Also, make sure you don't append empty string values to the array, because charCodeAt(0) for an empty string returns 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)
}

Further, you'd want to call isPrime in your calculate function, as setting the state is asynchronous process and you wouldn't able to capture the set value immediately right after. Update your isPrime function to accept the result as an argument.

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

Coming to the isPrime function, it looks alright. Now that, finalOutput function isn't used, you could instead make the button click listener point to the calculate function. Altogether, your component should look, something like this:

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