не меняется state, когда к нему приходить новый данные из пропса

Question

const [updateDesc, setUpdateDesc] = useState(desc.desc);
    
    console.log(updateDesc);

    const changeDesc = (e) =>{
        setUpdateDesc(e.target.value);
        setValueDesc(e.target.value);
    }

    return (
        <div className="flex items-center bg-green rounded-md mb-[24px] p-[20px]" key={id}>
            {
                desc.desc ?
                    <>
                        <input type="radio" name="text" value={desc.desc_id} onChange={(event) => selectText(event.target.value)}/>
                        <div className="ml-[20px] text-sm font-normal">
                            <textarea value={updateDesc} onChange={(e) => changeDesc(e)} className="outline-0 bg-inherit" name="desc" id="id" cols="90" rows="5"/>
                            <p className="mt-[15px] text-extra-gray">{updateDesc.length} characters</p>
                        </div>
                    </>
                    :
                    null
            }
        </div>
    );
};

Answer 1

Попробуйте использовать хук useEffect
https://ru.reactjs.org/docs/hooks-effect.html

const [updateDesc, setUpdateDesc] = useState(props.someValue);

useEffect(() => {
  setUpdateDesc(props.someValue)
}, [props.someValue])

Answer 2

Только совсем не понятно зачем заворачивать пропсу в state?

https://codepen.io/latdev/pen/qBoaKpQ

function Inner(props) {
  return <div>
    <h2>Inner</h2>
    <pre>Count {props.count}</pre>
    <a href="#" onClick={$ => props.resetPtr()}>Reset</a>
  </div>
}

function App() {
  const [count, setCount] = React.useState(0);
  return <div>
    <h1>Outer</h1>
    <Inner count={count} resetPtr={$ => setCount(0)} />
    <a href="#" onClick={$ => setCount(count+1)}>Add</a>
  </div>;
}

ReactDOM.render(<App />, document.getElementById("container"));

БЛОГ НА HUSL

не меняется state, когда к нему приходить новый данные из пропса

Ответы (2 шт):