警告：失败的道具类型：道具`value`在`TextInput`中被标记为必需，但它的值是`undefined`答案

【问题标题】：Warning: Failed prop type: The prop `value` is marked as required in `TextInput`, but its value is `undefined`警告：失败的道具类型：道具`value`在`TextInput`中被标记为必需，但它的值是`undefined`
【发布时间】：2021-09-28 07:52:03
【问题描述】：

这是在我的 google chrome 浏览器控制台上显示的错误：

警告：失败的道具类型：道具value 在 TextInput，但其值为undefined。

代码如下：

text-input.jsx

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

const TextInput = (props) => (
<div className="form-group">
    <label htmlFor={props.name}>{props.label}</label>
    <input 
        className="form-control mb-2"
        type={props.type}
        name={props.name}
        id={props.name}
        value={props.value}
        placeholder={props.placeholder}
        onChange={props.onChange}
    />
</div>
);

TextInput.propTypes = {
type: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
label: PropTypes.string.isRequired,
}

TextInput.defaultProps = {
type:'text',
placeholder: '',
}

export default TextInput;

form.jsx

import React from 'react';
import PropTypes from 'prop-types';
import TextInput from './text-input';

const Form = (props) => (
<form onSubmit={props.handleSubmit}>
    <TextInput
        name="name"
        value={props.values.name}
        label="Enter Name"
        placeholder="Enter Your Name"
        onChange={props.handleChange}
    />
    <TextInput
        type="email"
        name="email"
        value={props.values.eamil}
        label="Enter Email"
        placeholder="Enter Your Email"
        onChange={props.handleChange}
    />
    <TextInput
        type="password"
        name="password"
        value={props.values.password}
        label="Enter Password"
        placeholder="Enter Your password"
        onChange={props.handleChange}
    />
    <button className="btn btn-danger" type="submit">Submit</button>
</form>
);

Form.propTypes = {
values: PropTypes.object.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
}

export default Form;

问题出在哪里，如何找出问题所在？

【问题讨论】：

请在出现此错误消息时显示您正在渲染Form 的位置。看起来它的 values 属性缺少一个或多个 name、email 和 password 属性的值。

标签： javascript reactjs

【解决方案1】：

最可能的情况是您的props.value.name 等最初是undefined。在这种情况下，您将 undefined 作为 value 属性传递给您的 TextInput 组件，因此会出现错误。

【讨论】：

【解决方案2】：

这行在 email 属性上有错字：

 value={props.values.eamil}

应该是

  value={props.values.email}

【讨论】：