javascript - ReactJS 错误 : make sure to pass up the same props that your component's constructor was passed

Question

我正在学习“清晰”的 ReactJS(即它不是 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 中。我还为 li 元素使用了 key。但是我得到这样的错误:

Warning: List(...): When calling super() in List, make sure to pass up the same props that your component's constructor was passed.

Warning: Each child in an array or iterator should have a unique "key" prop.

Check the render method of List.

in ListItem (created by List)

in List

Warning: ListItem(...): When calling super() in ListItem, make sure to pass up the same props that your component's constructor was passed. Warning: ListItem(...): When calling super() in ListItem, make sure to pass up the same props that your component's constructor was passed. Warning: ListItem(...): When calling super() in ListItem, make sure to pass up the same props that your component's constructor was passed. Warning: ListItem(...): When calling super() in ListItem, make sure to pass up the same props that your component's constructor was passed. Warning: ListItem(...): When calling super() in ListItem, make sure to pass up the same props that your component's constructor was passed.

我做错了什么？

Answer 1

您需要使用单个变量，例如 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说 类组件应该总是使用 props 调用基础构造函数。

当我查看 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,
  );

似乎 React 检查它在 constructor 函数中接收到的 props 对象是否与您使用 super() 传递给基类的对象相同> 或不。在您的代码中，它当然不一样。例如，您传递给 super({attributes, value}) 的完全是一个不同的对象。因为在 JS 中:

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