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

Question

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

这是一个简化的父组件

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

这里有什么问题？

Answer 1

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

读取 setErrors

Answer 2

您的输入组件中似乎有错字。您设置了道具 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

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

How to pass data from parent to children with react hooks

javascript

reactjs

react-component

react-hooks