useState 在功能上與組件 React 的行為不同 (useState behaves differently in function vs componenet React)

問題描述

useState 在功能上與組件 React 的行為不同 (useState behaves differently in function vs componenet React)

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

</code></pre> 
所以，正如你在組件Box的return語句中看到的，我調用boxx函數返回box的html。在這種情況下，如果我在文本區域中輸入一些文本，文本會按預期打印，但是如果我將 boxx 函數更改為 Boxx 並在返回語句中我將其用作 </代碼>，我在 textarea 中輸入的文本會立即被刪除，或者只打印一個字母，在我輸入第二個字母后，它們都會被刪除。我發現，這種奇怪的行為是由於 theText 函數中的 useState 引起的，但不知道為什麼會發生這種情況。我該如何解決這個問題？






參考解法
方法 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.

(by bearthum、Patrick Roberts)
參考文件


useState behaves differently in function vs componenet React (CC BY‑SA 2.5/3.0/4.0)