چطور می‌توانم state والد را در React به‌روزرسانی کنم؟

برای به‌روزرسانی state والد از کامپوننت فرزند، باید یک تابع از والد به فرزند پاس بدی. این تابع مسئول به‌روزرسانی state والد خواهد بود و فرزند می‌تونه اون رو فراخوانی کنه. به این شکل، کامپوننت فرزند می‌تونه با والد تعامل داشته باشه.

لطفا کد زیر رو بررسی کن:

import React, { useState } from 'react';
import Child from './Child';
function Parent() {
const [parentState, setParentState] = useState('initial state');
const updateParentState = (newState) => {
setParentState(newState);
};
return (
<div>
<h1>Parent State: {parentState}</h1>
<Child onStateChange={updateParentState} />
</div>
);
}
export default Parent;
import React from 'react';
function Child({ onStateChange }) {
const handleClick = () => {
onStateChange('new state from child');
};
return (
<div>
<button onClick={handleClick}>Update Parent State</button>
</div>
);
}
export default Child;

در این مثال، تابع updateParentState در والد تعریف شده و از طریق prop به کامپوننت فرزند (Child) پاس داده شده. وقتی دکمه در فرزند کلیک میشه، تابع onStateChange فراخوانی میشه و state والد با مقدار جدید به‌روزرسانی میشه. به این ترتیب، والد با state جدید رندر میشه.

این روش بهت کمک می‌کنه تا به راحتی state والد رو از طریق فرزند مدیریت کنی. فقط مطمئن شو که این ارتباط به خوبی درک شده باشه و جایی که لازم داری، از این الگو استفاده کنی تا state به درستی به‌روزرسانی بشه.