将状态从子级更新到父级并从父级获取更新后的状态 - Typescript、React
众所周知，React 数据流是单向的。这个概念意味着数据只有一种方式可以传输到应用程序的其他部分，即状态传递到视图和子组件。 我正在执行我的孩子的状态更新。 但我还想在我的孩子中拥有最新更新的父状态值。 比如
const Parent:React.FC = () => {
const [parentName, setParentName] = useState<string>('Obi wan');
const updateName = (name: string):void => {
setParentName(name)
}
return (
<div>
<FirstChild name={parentName} updateName={updateName} />
<SecondChild name={parentName} updateName={updateName} />
</div>
)
}
……
interface IfirstChildProps {
name: string,
updateName: (arg: string) => void
}
const firstChild: React.FC<IfirstChildProps> = ({name, updateName}) => {
const [firstChildName, setFirstChildName] = useState<string>('')
useEffect(() => {
setFirstChildName(name)
},[name])
return (
<h1> {firstChildName} </h1>
<button onClick={() => updateName('Luke')}>first child</button>
)
}
export default firstChild;
。
interface IsecondChildProps {
name: string,
updateName: (arg: string) => void
}
const SecondChild: React.FC<IsecondChildProps> = ({name, updateName}) => {
const [secondChildName, setSecondChildName] = useState<string>('')
useEffect(() => {
setSecondChildName(name)
},[name])
return (
<h2> {secondChildName} </h2>
<button onClick={() => updateName('Vader')}>second child</button>
)
}
export default SecondChild;
好像有些不太对劲 所以如果有人能帮我的话我会很高兴。多谢 。干杯！
As we know React data flow is unidirectional. This concept means that data has one, and only one, way to be transferred to other parts of the application i.e state is passed to the view and to child components.
I am performing a state update from my children.
But i want to have also the latest updated parent state value inside my child.
For example
const Parent:React.FC = () => {
const [parentName, setParentName] = useState<string>('Obi wan');
const updateName = (name: string):void => {
setParentName(name)
}
return (
<div>
<FirstChild name={parentName} updateName={updateName} />
<SecondChild name={parentName} updateName={updateName} />
</div>
)
}
...
interface IfirstChildProps {
name: string,
updateName: (arg: string) => void
}
const firstChild: React.FC<IfirstChildProps> = ({name, updateName}) => {
const [firstChildName, setFirstChildName] = useState<string>('')
useEffect(() => {
setFirstChildName(name)
},[name])
return (
<h1> {firstChildName} </h1>
<button onClick={() => updateName('Luke')}>first child</button>
)
}
export default firstChild;
...
interface IsecondChildProps {
name: string,
updateName: (arg: string) => void
}
const SecondChild: React.FC<IsecondChildProps> = ({name, updateName}) => {
const [secondChildName, setSecondChildName] = useState<string>('')
useEffect(() => {
setSecondChildName(name)
},[name])
return (
<h2> {secondChildName} </h2>
<button onClick={() => updateName('Vader')}>second child</button>
)
}
export default SecondChild;
It seems that something is not quite right. So i would be glat if someone can give me a hand. Thanks a lot . Cheers !
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
当发送函数道具时，渲染的子组件想要知道它是一个具有字符串依赖项的函数，就像您的情况一样。
那么就不需要在本地状态中设置你的道具了。直接在子组件中使用
name属性。单击时，父组件将更新两个子组件中的名称When sending your function props, the rendered children components want know it's a function with a string dependency as in your case.
Then there is no need to set your set your props in a local state. Use the
nameprop in your child component directly. When there's a click, the parent will update the name in both children component