Блог

У меня есть этот функциональный компонент react, у меня проблема с функцией rest внутри него, я должен вызвать эту функцию дважды, чтобы изменить каждое отдельное состояние любым способом, чтобы объединить их в одно ? в классическом JavaScript я бы использовал условное выражение, но так как я новичок в react, я пока понятия не имею, как этого добиться ?

 import React, {useState} from 'react'

function ChangeableItem(props) {

    setNumber([props.number])
    setDescribe([props.dsecribe])
    }
    
    const restNumber = (e)=> {
        setNumber('') 
    }
    const restDescribe = (e)=> {
        setDescribe('')
    }
  
    return (
    <li className='day-item'>
    <div className='number amount' onFocus={() =>{restNumber();}}} contentEditable="true">{number}</div>
    <div className='number name'  onFocus={() =>{restDescribe();}}} contentEditable="true">{describe}</div>
    <div className="">
    {icons}
    </div>
    </li>
    )
} 

на самом деле, вы можете использовать useEffect это, например, хранить свою ценность в a useState и извлекать ее в useEffect

такие как:

 const [num, setNum] = React.useState('');
const [desc, setDesc] = React.useState('');


// these functions will retrieve values for you,
// when retrieving is done, it will set value to useState so you can use it.
React.useEffect(()=>{
  restNumber([props.number])
// assuming this function return a Promise
   .then((val)=>{
  setNum(val);
})

},[props.number])


React.useEffect(()=>{
  restDescription([props.description])
// assuming this function return a Promise
   .then((val)=>{
  setDesc(val);
})

},[props.description])


 

Редактировать:

если вы действительно хотите получить значение в фокусе, вы можете просто сделать

 <div onFocus={()=>restNumber([props.number]).then((val)=>setNum(val))}>

</div>

 

Вы можете использовать useEffect для обновления новых реквизитов:

 useEffect(() => setNumber(props.number), [props.number])
useEffect(() => setDescribe(props.dsecribe), [props.dsecribe])