繁体   English   中英

如何使用反应钩子将数据从父级传递给子级

How to pass data from parent to children with react hooks

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个简单的模式,其中我有一个提交表单我现在显示错误我想将这些错误传递给子组件。

这是一个简化的父组件

import React from 'react';
import Input from 'components/Functional/Input';

function Parent() {
    const [errors, setErrors] = useState([]);
    const handleSubmit = async e => {
            const formData = new FormData();
    }

    return (
        <Modal handleSubmit={handleSubmit}>
           <Input setErrors={errors} ></Input>
        </Modal>
    )
}

export default Parent

这是我的孩子组件

import React from 'react'

function Input({errors}) {
    const [field, setField] =useState('');

    console.log('errors', errors)
    return (
        <div>
            <input type="text"  onChange={e => setField(e.target.value)} />
        </div>
    )
}

export default Input

现在,当我提交有错误的数据时,子组件中的console.log('errors', errors) undefined

这里有什么问题?

2 个回复

注意道具名称。 您正在从父组件传递一个名为setErrors的属性,而在子组件中您正在查找errors 尝试将属性从setErrors重命名为errors或简单地从<Input />组件中读取setErrors

您的输入组件中似乎有拼写错误。 您设置了道具setErrors但您的组件需要errors 如果您使用普通的 javascript,您应该使用 proptypes 来确保不会发生这种情况。

import React from 'react'
import PropTypes from 'prop-types'

function Input({errors}) {
    const [field, setField] =useState('');

    console.log('errors', errors)
    return (
        <div>
            <input type="text"  onChange={e => setField(e.target.value)} />
        </div>
    )
}

Input.propTypes = {
    errors: PropTypes.arrayOf(PropTypes.string)
};

export default Input

PropTypes

2 如何在反应打字稿中使用类型将数据从父级传递给子级

我在我的项目中使用 React 和 Typescript。 在我的 App.tsx 中 我的父组件中有一个数据,例如: 我的父组件导航栏组件: 在我的子组件中,我不想获取这些项目(项目是 data.navData)并使用地图返回它们,例如: 我不知道我在父组件中定义类型的方式是对的。 ...

4 我如何使用道具将数据从父级传递给子级

我在 reactJs 中有父子组件,我想使用 props 将父数据传递给详细信息组件。 我尝试如下所示,但我无法显示数据保持将我重定向到父组件 父/母页 卡详细信息/子组件 主 App 路由组件函数 App() { return ( ); } ...

2019-11-28 02:52:17 1 95   reactjs
6 Blazor 将数据从父级传递给子级

我有一个 razor 页面,它依赖于它的父类和一个有自己的类并从父类接收数据的第二个孩子,我的问题是第二次调用 api,数据没有传递给第二个孩子,当其父项更改其数据时,第二个子项不会被渲染,但它可以在第一个渲染器上工作并且正在传递数据。 Parent.razor FirstChild.ra ...

7 NuxtJS中如何将数据从父级传递给子级

我想知道如何在 NuxtJs 中将一些字符串或动态数据从父级传递给子级 我如何尝试但没有奏效: 这是我的父组件: 这是我的 ChildComponent 这个方法没有在 ChildComponent 中呈现 ...

8 在 ReactJS Hooks 中将数据/变量从父级传递给子级

我希望传递我使用 fetch API 收到并在 Useraccount 组件中使用的 json 数据。 我环顾四周,我可以找到很多与从孩子传给父母有关的材料,很少提到从父母传给孩子。 我试过使用这个 userinfo={credentailverify} 很明显它对我不起作用,请提出任何建议 更 ...

9 将数据从父级传递给子级工作 1 次

我有3个组件: 主编 邮政补偿 作者比较 我将数据从post comp传递到main comp 在main comp我将从post comp收到的数据传递给author comp 它应该像魅力一样工作,但只有一次。 当我单击按钮再次将数据从post comp传递到main com ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM