代码之家 › 专栏 › 技术社区 › Andrey Bushman

ReactJS错误:确保传递与传递组件的构造函数相同的属性

reactjs javascript

Andrey Bushman · 技术社区 · 7 年前

我正在学习“清除”反应JS(即它不是JSX)。这是我的简单代码:

(() => {
    class List extends React.Component{
        constructor({tag, attributes, items}){
            super({tag, attributes, items})
            this.tag = tag
            this.attributes = attributes
            this.items = items
        }
        render(){
            return React.createElement(this.props.tag, this.props.attributes, items.map(
                (n, i) => new React.createElement(ListItem, 
                    { attributes: { ...n.attributes, key: i }, value: n.value })))
        }
    }

    class ListItem extends React.Component{
        constructor({attributes, value}){
            super({attributes, value})
            this.attributes = attributes
            this.value = value
        }
        render(){
            return React.createElement("li", this.props.attributes, this.props.value)
        }
    }

    const items = [
        { attributes: null, value: "A" },
        { attributes: null, value: "B" },
        { attributes: null, value: "C" },
        { attributes: null, value: "D" },
        { attributes: null, value: "E" }
    ]

    const root = document.getElementById("root")

    ReactDOM.render(new React.createElement(List, { tag: "ul", attributes: null, items }), root)
})()

请注意:我把 super 我在组件的构造函数中得到的相同参数。我也用 key 对于 li 元素。但我得到这样的错误:

警告:在中调用super()时列出(…)。 List ,确保通过向上传递组件的构造函数的相同属性。

警告:数组或迭代器中的每个子级都应具有唯一的“键” 支柱。

检查的呈现方法 表 .

在列表项中(由列表创建)

在列表中

警告:ListItem(…):在中调用super()时 ListItem 确定传递与组件的构造函数相同的属性通过。警告:ListItem(…):在中调用super()时 李斯特 , 确保传递与组件的构造函数相同的属性通过了。警告:ListItem(…):在中调用super()时 李斯特 ,确保传递与组件相同的属性已传递构造函数。警告:ListItem(…):调用super()时在里面 李斯特 ,确保传递与已传递组件的构造函数。警告:ListItem(…):当在中调用super()。 李斯特 确保放弃相同的道具传递了组件的构造函数。

我做错了什么?

1 回复 | 直到 7 年前

Arup Rakshit 7 年前

你需要使用一个变量,比如 props 例如,作为参数 constructor 功能。然后把它传给 super . 下面的代码修复了所有警告。

class List extends React.Component {
  constructor(props) {
    super(props);
    this.tag = props.tag;
    this.attributes = props.attributes;
    this.items = props.items;
  }
  render() {
    return React.createElement(
      this.props.tag,
      this.props.attributes,
      items.map(
        (n, i) =>
          new React.createElement(ListItem, {
            attributes: { ...n.attributes, key: i },
            value: n.value
          })
      )
    );
  }
}

class ListItem extends React.Component {
  constructor(props) {
    super(props);
    this.attributes = props.attributes;
    this.value = props.value;
  }
  render() {
    return React.createElement("li", this.props.attributes, this.props.value);
  }
}

const items = [
  { attributes: null, value: "A" },
  { attributes: null, value: "B" },
  { attributes: null, value: "C" },
  { attributes: null, value: "D" },
  { attributes: null, value: "E" }
];

const root = document.getElementById("root");

ReactDOM.render(
  new React.createElement(List, { tag: "ul", attributes: null, items }),
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
	<div id="root"></div>

Official doc 说 类组件应始终使用 道具 .

当我看到 source :

const hasMutatedProps = instance.props !== newProps;
warningWithoutStack(
    instance.props === undefined || !hasMutatedProps,
      '%s(...): When calling super() in `%s`, make sure to pass ' +
      "up the same props that your component's constructor was passed.",
      name,
      name,
  );

它似乎反应检查 道具 在中接收到的对象 构造函数 函数与使用传递给基类的对象相同 super() 或者没有。在你的代码中,它当然是不一样的。你要传递给 super({attributes, value}) 例如,完全不同的对象。因为在JS:

{a: 1, b: 2} === {a:1, b:2} // false
{a: 1, b: 2} !== {a:1, b:2} // true