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

Question

I am trying to send data from parent to Child component. I am using RPC to get data, so initially the data may not be present however i am returning a "loading" when data is unavailable

After the data is fetched, The data is displayed in the parent component However the child component is not called at all. This is the parent code :

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;

The Following is a Child Component:

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);

Here is the error from the console

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

The data as you can see is displayed in bundle.js:21450 data is [Object, Object] 2

However the child component is not at called.

I am unsure of what i am doing wrong, Any suggestion will be great.

Answer 1

Something crazy is happening with that div tag

You're closing the div inside of the callback for map . Pretty sure this won't even compile, so there's part of the problem.

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

If in doubt, wrap your JSX in parens and ident your components so that you can make sure they match up.

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

Your callback doesn't accept any arguments

When you map over an Array the elements are passed to the callback function as the first argument. This is missing from your code.

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

You're passing the wrong props

Inside your JSX you are passing data as the info prop. This should instead be dataItem .

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

Map callback returns undefined

The callback you pass to map must return a value to be useful. Convert this code in regular calls to the React API to see the problem.

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

There's no return statement in your code. As magical as JSX is, it's not going to infer this for you and at the end of the day, it's just a fancy way to simplify some method calls.

Add a return statement before the call to createElement .

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

Or alternatively with JSX and an arrow function (implicit return).

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

Answer 2

Looks like something is not going right inside this statement in your parent element:

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

If you want to have 1 child per object in your data array, then it should look something like this:

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