javascript - 警告 : Failed prop type: The prop `value` is marked as required in `TextInput` , 但其值为 `undefined`

Question

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

Warning: Failed prop type: The prop value is marked as required in TextInput, but its value is undefined.

代码如下:

文本输入.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;

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

Answer 1

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