useState 在 function 与组件 React 中的行为不同

Question

import React, {useState} from 'react'
import './box.css'
import cross from './cross.png';
import axios from 'axios'

function Box(props){
    const[disappear, setdisappear] = useState(false)
    const[appear, setappear] = useState(false)
    const[text, settext] = useState('')
    const[able, setable] = useState(true)
    

    async function clear(){
        console.log(props.id)
        setdisappear(true)
        let id = props.id
        let token = sessionStorage.getItem('token')
        let data =  {token:token, id:id}
        await axios.post('http://localhost:5000/home/deleteText', data)
        
        

    }
    function theText(e){
        let current = e.target.value
        console.log(current)
        settext(current)
        console.log(text)
        if(current===''){
            setable(true)
        }else{
            setable(false)
        }
        
    }
    async function savetext(){
        let data = {text:text, token:sessionStorage.getItem('token')}
        const request = await axios.post('http://localhost:5000/home/addText',data)
        //e.target.reset() 
        document.getElementById('textarea').value = ''
        
        setable(true)
        setappear(true)
        
    }
    function boxx(){
        return(
            <div className = 'wrapper'>
                <div className='outerbox'>
                    <div className='empty'>
                    </div>
                        <textarea id = 'textarea' onChange ={theText}  className='input' rows="10" cols="50" placeholder='enter ur text mf' defaultValue={props.text}></textarea>
                    <div className='x'>
                        <button onClick={clear} value={props.id} disabled = {props.disableButton}>
                            {props.disableButton?'':<img src={cross} alt = '' />}
                        </button>
                    </div>
                    {props.disableButton?<div><button disabled = {able} onClick = {savetext}>save</button></div>:''}
                </div>
            </div>
        )
    }
    return(
        <div>
            
            {disappear?null:boxx()}
            {appear?boxx():null}
        </div>
    )
}

export default Box

So, as you can see in the return statement of component Box, I call boxx function which returns the html of the box. In this case, if I input some text in the text area, the text gets printed as expected, however if I change the boxx function to Boxx and in the return statement I use it as <Boxx/> , the text I enter in the textarea gets deleted immediately or just one letter gets printed and after I input the second letter, they both get deleted. I figured out, this strange behaviour is because of useState in theText function but don't have a clue why this is happening. How can I solve this?

Answer 1

Because Boxx is defined inside of Box , its component type changes every time Box re-renders, which causes React's diffing algorithm to reset the state of the <textarea> inside it.