在React中传递道具

Question

我担心这不是一个明确表达的问题，因为我对React有点新鲜。

我正在修改组件SeqAlignmentChart的方法，我正在从componentWillReceiveProps中进行以下调用

如果我执行“console.log（this）”，我会

这一切看起来都很棒。但是如果我做“console.log（this.props）”，我会得到

注意'data'字段从“this”中的长度11变为“this.props”中的长度1，而'width'属性似乎已经转移。再次为格式化道歉。

对我来说，当我打印“this.props”时，我得到的数据对象不包含我期望的值，这似乎很奇怪。任何人都可以解释为什么'console.log（this.props）'似乎不像我刚刚'console.log（this）'那样打印相同的道具？

非常感谢任何见解

编辑：这是组件的代码，不确定哪些部分与此

相关

export default class SeqAlignmentChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    console.log("in mount component $$$$$$$$$$$$$$$$$$$$$");
    console.log(this);
    this.seqAlignmentChart = new SeqAlignmentVis(
      ReactDOM.findDOMNode(this),
      this.props.data,
      {
        width: this.props.width ? this.props.width - 15 : 1000 - 15,
        margin: { top: 10, right: 10, bottom: 10, left: 10 }
      }
    );
    this.seqAlignmentChart.render();
  }

  componentWillReceiveProps(nextProps) {
    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!");
    console.log(this);
    console.log(this.props);
    console.log(this.props.data[0]);
    console.log(this.props.data.length);
    if (this.props.data.length > 1) {
      console.log("should rerender here ^^^^^^^^^^^^^^^^^^^^^^^^");
      this.componentDidMount();
    }
  }

  render() {}
}

Answer 1

如果没有具体的例子，很难调试，但我猜“这个”超出了范围。

https://github.com/facebook/react-devtools

你能试试React的Chrome Devtools吗？很确定它可以比console.logging更好地检查React的状态。

Answer 2

看看documentation for componentWillReceiveProps。请注意它如何将nextProps作为参数传递。 nextProps指的是组件即将接收的道具。 this.props指的是组件当前拥有的旧道具。

console.log(nextProps)时会发生什么？这是您期望的数据吗？