javascript - 如何使用反应挂钩将数据从父级传递给子级
问题描述
我有一个简单的模式,其中我有一个提交表单我现在显示错误我想将这些错误传递给子组件。
这是一个简化的父组件
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
这里有什么问题?
解决方案
注意道具名称。您正在从父级传递一个名为setErrors
while 在您正在寻找的子组件中的属性errors
。尝试将属性重命名为setErrors
toerrors
或简单地setErrors
从<Input />
组件中读取