我有两个 jsx 文件。TodoAPI.jsx 有一个名为 getTodos() 的函数，它使用 axios 从 mongodb 数据库中获取数据，并如测试所示那样成功。这个函数通常由 TodoApp.jsx 中的某些行调用，显然整个代码在 getTodos() 甚至返回数组之前执行。因此，应该由 getTodos() 填充的所有数组仍然未定义。我通过setTimeout(function(){ console.log(TodoAPI.getTodos()); }, 3000);在 TodoApp.jsx 中使用它来确保我没有错，它实际上打印了数组。
我如何确保 getTodos() 在其余代码开始之前完成？或者有更好的解决方案吗？
以下是代码的相关部分：TodoAPI.jsx：
var $ = require('jquery');
import axios from 'axios';
module.exports = {
setTodos: function (todos) {
if ($.isArray(todos)) {
localStorage.setItem('todos', JSON.stringify(todos));
return todos;
}
},
getTodos: function () {
let todos = [];
axios({
method: 'get',
//url:'https://nameless-island-69625.herokuapp.com/todos',
url: 'http://localhost:3000/todos',
headers:{
'x-auth': localStorage.getItem('x-auth')
}
}).then(function(response) {
todos = $.extend(true, [], response.data.todos);
console.log('successful response from todos');
}).then(() => {
console.log(todos);
return todos;
}).catch((e) => {
console.log('failed response from todos');
console.log(e);
});
// return [{name:'asd'},{name:'qwe'},{name:'fgd'},];
},
TodoApp.jsx：
var React = require('react');
var uuid = require('node-uuid');
var moment = require('moment');
const axios = require('axios');
var TodoList = require('TodoList');
var AddTodo = require('AddTodo');
var TodoSearch = require('TodoSearch');
var TodoAPI = require('TodoAPI');
var TodoApp = React.createClass({
getInitialState: function () {
return {
showCompleted: false,
searchText: '',
todos: TodoAPI.getTodos()
};
},
您无法分配todos状态，getInitialState因为 api 调用是异步的。而是设置todos在componentDidMount. 就像是：
componentDidMount() {
axios.get('http://localhost:3000/todos')
.then(res => {
this.setState({ todos: res.data.todos });
});
}
如果您希望在单独的文件中调用 api，请确保return axios(...从您的函数中componentDidMount执行以下操作：
componentDidMount() {
getTodos().then(todos => {
this.setState({ todos });
});
}
在这种情况下，您的getTodos函数可能如下所示：
getTodos: function () {
return axios({
method: 'get',
url: 'http://localhost:3000/todos',
headers:{
'x-auth': localStorage.getItem('x-auth')
}
}).then(function(response) {
return response.data.todos;
})
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句