i need React databinding (Arr push after data refresh)

Question

I am faced with the problem

web page is to react with the signal.

Signal does not regularly.

my Scenarios (Arr data push after refresh)

It does not give any one event

Because I can not use. setState funciton

i think javascript function call for react databind refresh

Because the data binding, you use the following dataRefresh() functions.

I know code is incorrect.

I've written code like the following:

var dataArr = [{
  key : '1',
  text : "hello1",
  title: "title1"
},
{
  key : '2',
  text : "hello2",
  title: "title2"
},
{
  key : '3',
  text : "hello3",
  title: "title3"
}
];

var Repeat = React.createClass({
  render : function(){
    var data = this.props.items;
    return(
        <PanelGroup accordion >
           { data.map(function(item){
            return(
              <Panel header={item.title} eventKey={item.key} >
                {item.text}
              </Panel>
              );
           })}
        </PanelGroup>
      );
  }

});

function startReact(){
  React.render(
    <div>
    <Repeat items={ dataArr }/>
    </div>,
    document.getElementById('content')
    );
}

startReact();

function dataRefresh(){
  dataArr.push({
    key : '4',
    text : "hello4",
    title: "title4"
  });

  startReact();
}

setTimeout("dataChange()",3000);

It is the question.

1. I need to have an idea that can solve the problem.

2. Advice is required.

Answer 1

That's a bad idea. When you have new data use setState so it will update/rerender your view automatically that's the point of react.

Bind your update to a function that update the state not directly to the render.

Here is an example very easy it explain how to update your state when the user is clicking on some button: https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

So for your instead of handling a user action you'll set an handler that is called when you have new data.

I hope it's clear

Answer 2

To go in React way, you must use state instead of that above method.

Use getInitialState to point to the global dataArr and then use setState to update the state.

Even I would suggest putting dataArr in the base component holding the child components. This will avoid polluting the global namespace as well.

Inside your setTimeout, avoid using string. instead wrap it inside a function like below:

setTimeout(function() {
   dataChange();
}, 3000);

So the code will become:

var Repeater = React.createClass({
    getInitialState: function() { 
        return {
           data: dataArr
        }
    },

    componentDidMount: function() {
        setTimeout(function() {
              // update the dataArr
              // Instead of calling dataChange gloabl method, I would put it inside the base component and call this.updateData();
             // this.setState({data: dataArr});
       }.bind(this),3000);
    },

    updateData: function() {
           // increment the array and call 
           this.setState({data: dataArr});

    },
    render : function() {
             return (
                 <div>
                    <Repeat items={ this.state.data}/>
                 </div>
             );
    }
});

The below code will become:

function startReact(){
  React.render(<Repeater />,
    document.getElementById('content')
    );
}