ReactJS错误：确保传递与传递组件的构造函数相同的道具

时间：2018-09-18 19:00:06

标签： javascript reactjs

我正在学习“清晰的” 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中输入了与组件的构造函数中相同的参数。另外，我对key元素使用了li。但是我得到了这样的错误：

  

警告：列表（...）：在List中调用super（）时，请确保通过   传递与组件的构造函数相同的道具。

     

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

     

检查List的渲染方法。

     

在ListItem中（由列表创建）

     

在列表中

     

警告：ListItem（...）：在ListItem中调用super（）时，请确保   传递与组件的构造函数相同的道具   通过了。警告：ListItem（...）：在ListItem中调用super（）时，   确保传递与组件的构造函数相同的道具   通过了。警告：ListItem（...）：在中调用super（）时   ListItem，请确保传递与组件相同的道具   构造函数已通过。警告：ListItem（...）：调用super（）时   在ListItem中，确保传递与您相同的道具   组件的构造函数已传递。警告：ListItem（...）：何时   在ListItem中调用super（），确保传递相同的道具   您的组件的构造函数已通过。

我做错了什么？

2 个答案:

答案 0 :(得分：1)

You need use a single variable say props for example as a paramter of constructor function. Then pass it to the super. The below code fixed all warnings.

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 says Class components should always call the base constructor with props.

When I look at the 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,
  );

It seems react checks if the props object it received in the constructor function is same object that you passed to base class using super() or not. And in your code, it is of-course not the same. What you are passing to the super({attributes, value}) for example totally a different object. Because in JS:

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

答案 1 :(得分：0)

你可以在渲染方法中使用解构

<div class='row'>
    <div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'>
      <ul class='filtering-menu text-center toggelable'>
        <li>
          <a data-id=1 class='active' href='#'>TOTAL PER COLLEGE PER FACULTY</a>
        </li>
        <li>
          <a data-id=2 href='#'>TOTAL SPENDING COMPARISON</a>
        </li>
        <li>
          <a data-id=3 href='#'>FEES REQUESTS</a>
        </li>
        <li>
          <a data-id=4 href='#'>INCENTIVES REQUESTS</a>
        </li>
        <li>
          <a data-id=5 href='#'>FEES PER FACULTY MEMBER</a>
        </li>
        <li>
          <a data-id=6 href='#'>INCENTIVES PER FACULTY MEMBER</a>
        </li>
        
        <li>
          <a data-id=7 href='#'>Another link - #7</a>
        </li>
        <li>
          <a data-id=8 href='#'>Another link - #8</a>
        </li>
      </ul>
    </div>
</div>
<div class='row filtering-content'>

    <div data-id=1 id='first' class='col-md-12 col-sm-12 col-xs-12' style='display:block;'>
      <h4 class='card-title'></h4>
      <div data-id='first' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=2 id='second' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='second' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=3 id='third' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='third' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=4 id='fourth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fourth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=5 id='fifth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='fifth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=6 id='sixth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='sixth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    
    <div data-id=7 id='seventh' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='seventh' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
    <div data-id=8 id='eighth' class='col-md-12 col-sm-12 col-xs-12' style='display:none;'>
      <h4 class='card-title'></h4>
      <div data-id='eighth' class='vizContainer' style='width: 100%; height:auto;'></div>
    </div>
    
</div>
相关问题
最新问题