使用ReactJs中的道具从父母到孩子的数据无法正常工作

Question

我正在尝试将数据从父级发送到子级组件。 我正在使用RPC来获取数据，因此最初数据可能不存在，但是当数据不可用时我将返回“加载”

提取数据后，数据将显示在父组件中，但是根本不会调用子组件。 这是父代码：

var ReactDOM = require('react-dom')
var React = require('react')
var RPC = require('../RPC')
var connect = require('react-redux').connect
var ContentData = require('./content_data')
var Content= React.createClass({
    getInitialState : function(){
        return {};
    },
    componentDidMount : function(){
        console.log("called");
        var that=this;
        RPC.execute("content","search_read_path",[[],["title","body"]],{},function(err,data) {
            this.setState({data:data});
        }.bind(this));
    },
    render: function() {
        console.log("render is called");
        var data = this.state.data
        if (!data) return <div>Loading</div>;
        console.log("data is ",data,data.length);
        return <div>
                {data.map(function){
                <ContentData info={data}/>
            </div>}.bind(this))}
    },    
});
module.exports=Content;

以下是子组件：

var ReactDOM = require('react-dom')
var React = require('react')
var RPC = require('../RPC')
var connect = require('react-redux').connect
var ContentData= React.createClass({
    render: function() {
        data = this.props.info;
        return <div className="col-md-10 col-sm-10">
            <div className="content">
                <div className="content_body">
                    <h1 className="text-uppercase"></h1><span>date and Time</span>
                    <hr/>
                    <p>
                    This is the body Section
                    </p>
                    <p id="paragraph_footer">This is the footer. Can have special texts. Will be displayed only of there is any documetns in footer.</p>
                    <hr/>
                    <div className="visitor_box">
                        <form><span className="label label-default">Leave a Reply </span>
                            <input className="form-control input-sm" type="email" placeholder="Place your email"/>
                            <div className="form-group">
                                <textarea className="form-control input-sm" rows="2" placeholder="Your Comment"></textarea>
                            </div>
                            <button className="btn btn-success btn-sm" type="button">Submit </button>
                        </form>
                        <div className="previous_replies">
                            <h5>Sijan replied:</h5>
                            <p className="bg-info">Paragraph</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    },    
});

module.exports = connect(ContentData);

这是来自控制台的错误

render is called
bundle.js:21440 called
bundle.js:21466 RPC content search_read_path [Array[0], Array[2]] Object {}
bundle.js:21486 RPC OK content search_read_path [Object, Object]
bundle.js:21447 render is called
bundle.js:21450 data is  [Object, Object] 2
bundle.js:2478 Warning: wrapWithConnect(...): No `render` method found on the returned component instance: you may have forgotten to define `render`, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.warning @ bundle.js:2478ReactCompositeComponentMixin.mountComponent @ bundle.js:7540wrapper @ bundle.js:1712ReactReconciler.mountComponent @ bundle.js:5904ReactMultiChild.Mixin._mountChildByNameAtIndex @ bundle.js:14703ReactMultiChild.Mixin._updateChildren @ bundle.js:14607ReactMultiChild.Mixin.updateChildren @ bundle.js:14555ReactDOMComponent.Mixin._updateDOMChildren @ bundle.js:11925ReactDOMComponent.Mixin.updateComponent @ bundle.js:11754ReactDOMComponent.Mixin.receiveComponent @ bundle.js:11699ReactReconciler.receiveComponent @ bundle.js:5954ReactCompositeComponentMixin._updateRenderedComponent @ bundle.js:7936ReactCompositeComponentMixin._performComponentUpdate @ bundle.js:7918ReactCompositeComponentMixin.updateComponent @ bundle.js:7847wrapper @ bundle.js:1712ReactCompositeComponentMixin.performUpdateIfNecessary @ bundle.js:7795ReactReconciler.performUpdateIfNecessary @ bundle.js:5969runBatchedUpdates @ bundle.js:6551Mixin.perform @ bundle.js:7011Mixin.perform @ bundle.js:7011assign.perform @ bundle.js:6508flushBatchedUpdates @ bundle.js:6569wrapper @ bundle.js:1712Mixin.closeAll @ bundle.js:7077Mixin.perform @ bundle.js:7024ReactDefaultBatchingStrategy.batchedUpdates @ bundle.js:11044enqueueUpdate @ bundle.js:6598enqueueUpdate @ bundle.js:6183ReactUpdateQueue.enqueueSetState @ bundle.js:6349ReactComponent.setState @ bundle.js:16202(anonymous function) @ bundle.js:21443$.ajax.success @ bundle.js:21489j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @ jquery.min.js:5b @ jquery.min.js:5
bundle.js:2478 Warning: propTypes was defined as an instance property on wrapWithConnect. Use a static property to define propTypes instead.warning @ bundle.js:2478ReactCompositeComponentMixin.mountComponent @ bundle.js:7566wrapper @ bundle.js:1712ReactReconciler.mountComponent @ bundle.js:5904ReactMultiChild.Mixin._mountChildByNameAtIndex @ bundle.js:14703ReactMultiChild.Mixin._updateChildren @ bundle.js:14607ReactMultiChild.Mixin.updateChildren @ bundle.js:14555ReactDOMComponent.Mixin._updateDOMChildren @ bundle.js:11925ReactDOMComponent.Mixin.updateComponent @ bundle.js:11754ReactDOMComponent.Mixin.receiveComponent @ bundle.js:11699ReactReconciler.receiveComponent @ bundle.js:5954ReactCompositeComponentMixin._updateRenderedComponent @ bundle.js:7936ReactCompositeComponentMixin._performComponentUpdate @ bundle.js:7918ReactCompositeComponentMixin.updateComponent @ bundle.js:7847wrapper @ bundle.js:1712ReactCompositeComponentMixin.performUpdateIfNecessary @ bundle.js:7795ReactReconciler.performUpdateIfNecessary @ bundle.js:5969runBatchedUpdates @ bundle.js:6551Mixin.perform @ bundle.js:7011Mixin.perform @ bundle.js:7011assign.perform @ bundle.js:6508flushBatchedUpdates @ bundle.js:6569wrapper @ bundle.js:1712Mixin.closeAll @ bundle.js:7077Mixin.perform @ bundle.js:7024ReactDefaultBatchingStrategy.batchedUpdates @ bundle.js:11044enqueueUpdate @ bundle.js:6598enqueueUpdate @ bundle.js:6183ReactUpdateQueue.enqueueSetState @ bundle.js:6349ReactComponent.setState @ bundle.js:16202(anonymous function) @ bundle.js:21443$.ajax.success @ bundle.js:21489j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @ jquery.min.js:5b @ jquery.min.js:5
bundle.js:2478 Warning: contextTypes was defined as an instance property on wrapWithConnect. Use a static property to define contextTypes instead.warning @ bundle.js:2478ReactCompositeComponentMixin.mountComponent @ bundle.js:7567wrapper @ bundle.js:1712ReactReconciler.mountComponent @ bundle.js:5904ReactMultiChild.Mixin._mountChildByNameAtIndex @ bundle.js:14703ReactMultiChild.Mixin._updateChildren @ bundle.js:14607ReactMultiChild.Mixin.updateChildren @ bundle.js:14555ReactDOMComponent.Mixin._updateDOMChildren @ bundle.js:11925ReactDOMComponent.Mixin.updateComponent @ bundle.js:11754ReactDOMComponent.Mixin.receiveComponent @ bundle.js:11699ReactReconciler.receiveComponent @ bundle.js:5954ReactCompositeComponentMixin._updateRenderedComponent @ bundle.js:7936ReactCompositeComponentMixin._performComponentUpdate @ bundle.js:7918ReactCompositeComponentMixin.updateComponent @ bundle.js:7847wrapper @ bundle.js:1712ReactCompositeComponentMixin.performUpdateIfNecessary @ bundle.js:7795ReactReconciler.performUpdateIfNecessary @ bundle.js:5969runBatchedUpdates @ bundle.js:6551Mixin.perform @ bundle.js:7011Mixin.perform @ bundle.js:7011assign.perform @ bundle.js:6508flushBatchedUpdates @ bundle.js:6569wrapper @ bundle.js:1712Mixin.closeAll @ bundle.js:7077Mixin.perform @ bundle.js:7024ReactDefaultBatchingStrategy.batchedUpdates @ bundle.js:11044enqueueUpdate @ bundle.js:6598enqueueUpdate @ bundle.js:6183ReactUpdateQueue.enqueueSetState @ bundle.js:6349ReactComponent.setState @ bundle.js:16202(anonymous function) @ bundle.js:21443$.ajax.success @ bundle.js:21489j @ jquery.min.js:2k.fireWith @ jquery.min.js:2x @ jquery.min.js:5b @ jquery.min.js:5
bundle.js:7961 Uncaught TypeError: inst.render is not a function

您可以看到的数据显示在bundle.js中：21450数据为[Object，Object] 2

但是，未调用子组件。

我不确定自己在做什么错，任何建议都会很棒。

Answer 1

那个div标签正在发生疯狂的事情

您正在关闭map回调的div 。 可以肯定的是，它甚至不会编译，因此存在部分问题。

 return <div>
   {data.map(function){
     <ContentData info={data}/>
     </div>}.bind(this))}
 },

如有疑问，请将JSX包裹在括号中并标识组件，以确保它们匹配。

return (
  <div>
   {data.map(function) {
     <ContentData info={data}/>
   }.bind(this))}
  </div>
);

您的回调不接受任何参数

当您在Array上进行映射时，元素将作为第一个参数传递给回调函数。 您的代码中缺少此内容。

return (
  <div>
   {data.map(function(dataItem) {
     <ContentData info={data}/>
   }.bind(this))}
  </div>
);

您传递错误的道具

在JSX内部，您正在传递data作为info道具。 相反，它应该是dataItem 。

return (
  <div>
   {data.map(function(dataItem) {
     <ContentData info={dataItem}/>
   }.bind(this))}
  </div>
);

地图回调返回undefined

您传递给map的回调必须返回一个有用的值。 在常规调用中将此代码转换为React API以查看问题。

return (
  <div>
   {data.map(function(dataItem) {
     React.createElement(ContentData, { info: dataItem });
   }.bind(this))}
  </div>
);

您的代码中没有return语句。 就像JSX一样神奇，它不会为您推断这一点，并且到最后，这只是简化某些方法调用的一种好方法。

在调用createElement之前添加return语句。

return (
  <div>
   {data.map(function(dataItem) {
     return React.createElement(ContentData, { info: dataItem });
   }.bind(this))}
  </div>
);

或者使用JSX和箭头功能（隐式返回）。

return (
  <div>
   {data.map(item => <ContentData info={item} />)}
  </div>
);

Answer 2

在您的父元素中的此语句内看起来似乎没有正确的东西：

 return
   <div>
     {data.map(function){
       <ContentData info={data}/>
       </div>}.bind(this))}

如果您希望数据数组中每个对象有1个孩子，那么它应该看起来像这样：

return
  <div>
    {data.map(function(dataItem)          // Provide dataItem as parameter to function
      {
        <ContentData info={dataItem} />   // Render 1 ContentData child per data item
      })
    }
  </div>