解决方案

Question

我有一个自定义输入组件，如果我传递一个名为value的prop，那么它根本不会渲染，而如果我将prop的名称更改为除value之外的其他东西，那么一切都按预期工作。我想在过去的几个小时里弄明白，但它没有结果。

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

class Input extends React.Component {
  constructor (props) {
    super(props);
    this.state = this.extractStateFromProps(props);
    this.onChange = e => props.onChange(e.target.value);
  }

  componentWillReceiveProps (nextProps) {
    this.setState(this.extractStateFromProps(nextProps));
  }

  extractStateFromProps (props) {
    const value = props.value;
    return value;
  }

  render () {
    console.log(this.props, this.state);
    return (
      <input
        type={this.props.type}
        value={this.props.value}
        onChange={this.onChange}
        placeholder={this.props.placeholder}
        name={this.props.identifier}
      />
    );
  }
}

Input.propTypes = {
  type: PropTypes.oneOf('text', 'number'),
  value: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  identifier: PropTypes.string
};

export default Input;

如果我将道具“text”命名为“value”，则不会呈现任何内容。

      <Input
        type="text"
        placeholder="Recipie Name"
        onChange={this.onRecipeNameChange}
        identifier="recipeName"
        text={this.state.currentRecipe.recipeName}
      />

Link to the source

Answer 1

那是因为当您致电extractStateFromProps时，您要返回一个字符串，并且必须将本地组件状态设置为object或null或undefined一个简单的值

所以当你传递text道具时，在：

  extractStateFromProps (props) {
    const value = props.value;

    return value;
  }

value未在您的道具对象中定义，因此返回的值为undefined，有效作为反应state。

但是当你将value作为道具传递this.state.currentRecipe.recipeName时应该是一个字符串：

  extractStateFromProps (props) {
    const value = props.value;

    return value;
  }

返回的值为string类型，无法设置为有效的反应state。

解决方案

您可以修复此问题，在extractStateFromProps中返回一个对象：

  extractStateFromProps (props) {
    const value = props.value;

    return { value };
  }

那么你可以这样使用输入：

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

class Input extends React.Component {
  constructor (props) {
    super(props);
    this.state = this.extractStateFromProps(props);
    this.onChange = e => props.onChange(e.target.value);
  }

  componentWillReceiveProps (nextProps) {
    this.setState(this.extractStateFromProps(nextProps));
  }

  extractStateFromProps (props) {
    const value = props.value;
    return { value };
  }

  render () {
    console.log(this.props, this.state);
    return (
      <input
        type={this.props.type}
        value={this.props.value}
        onChange={this.onChange}
        placeholder={this.props.placeholder}
        name={this.props.identifier}
      />
    );
  }
}

Input.propTypes = {
  type: PropTypes.oneOf('text', 'number'),
  value: PropTypes.string,
  onChange: PropTypes.func,
  placeholder: PropTypes.string,
  identifier: PropTypes.string
};

export default Input;

  <Input
    type="text"
    placeholder="Recipie Name"
    onChange={this.onRecipeNameChange}
    identifier="recipeName"
    value={this.state.currentRecipe.recipeName}
  />

名为“value”的道具会停止渲染

1 个答案:

解决方案