2017-02-20 2 views
0

Мне нужно сделать эту страницу автоматически обновленной, сделать вызов ajax для бэкэнда 3 минуты как, как настроить это? Я думаю, что задан интервал в ajax, чтобы он автоматически вызывался каждые 3 минуты? Есть ли способ реализовать это? Или есть лучшее решение для реализации этого?Как сделать автоматическое обновление ajax в реакции js

export default class InventoryLevelReport extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     data: [ 
     { 
      sku: null, 
      inventoryCount: 0 
     } 
     ], 
     url: '/mft/api/reports/inventory-view' 
    }; 
    } 

    sortByCount() { 
    this.setState({data: _.orderBy(this.state.data, (i) => i.inventoryCount)}); 
    } 

    componentDidMount() { 
    ajax(this.state.url, { 
     success: data => { 
     console.log(data); 
     this.setState({data: data.data}); 
     } 
    }); 
    } 

    render() { 
    const buttonStyle = { 
     position: 'relative', 
     float: 'right' 
    }; 
    return <div className="content"> 
     <Button style={buttonStyle} onClick={() => this.sortByCount()}>Sort</Button> 
     <div> 
     <Table tableType='bordered'> 
      <th>SKU</th> 
      <th>Count</th> 
      <tbody> 
      {this.state.data.map((data, i) => <InventoryTableRow data={data} key={i} />)} 
      </tbody> 
     </Table> 
     </div> 
    </div>; 
    } 
} 

class InventoryTableRow extends React.Component { 

    render() { 
    return (
     <TableRow> 
     <TableColumn>{JSON.stringify(this.props.data.sku).split('"').join('')}</TableColumn> 
     <TableColumn>{JSON.stringify(this.props.data.inventoryCount)}</TableColumn> 
     </TableRow> 
    ); 
    } 
} 
+0

Для обработки сложных взаимодействий, вы можете посмотреть в [перевождь] (https://github.com/reactjs/redux), [реакция-редукция] (https://github.com/reactjs/react-redux) и [redux-thunk] (https://github.com/gaearon/redux-thunk). –

ответ

0

Вы должны быть в состоянии обернуть АЯКС вызов с setInterval

constructor() { 
    super(); 

    // ... existing constructor code 

    this.loadData = this.loadData.bind(this) 
} 

loadData() { 
    ajax(this.state.url, { 
    success: data => { 
     console.log(data); 
     this.setState({data: data.data}); 
    } 
    } 
} 

componentDidMount() { 
    this.loadData() 
    setInterval(this.loadData), 180000); // 3 minutes in milliseconds 
} 
+0

спасибо за ответ, но когда я установил его через 30 секунд, первый раз, когда он появится, будет через 30 секунд, как этого избежать? –

+0

Я изменил свой ответ для вас. просто позвоните сначала. –

+0

Эй, я пробовал ваше решение, он работает только один раз при загрузке страницы –

Смежные вопросы