Question

在大多数情况下，我都遵循this教程。

我的Django API设置良好。我具有此服务功能：

TicTacNode t[nodenum];

我的export default class GoalService{ getGoals() { const url = `${API_URL}/api/goals`; return axios.get(url).then(response => response.data); } }中的componentDidMount方法调用了哪个方法：

GoalList

（这是上面链接的教程的步骤8 ）。

现在，当我尝试使用class GoalTable extends Component { constructor(props) { super(props); this.state = { goals: [], now: now.getDate(), } } componentDidMount() { var self = this; goalService.getGoals().then(function (result) { console.log(result); self.setState({ goals: result.data }) }); } render() { ... }时，出现错误{ this.state.goals.map(...) }。从其他线程来看，很多人似乎都遇到了这个问题-但这是由于他们在提出的请求中使用了TypeError: this.state.goals is undefined 外部，并且自{{1} }是异步的，状态设置为空白。我在调用setState()中使用它，所以我认为这不是问题。

我尝试向setState()添加第二个参数（以防此操作失败），但是then调用成功，并成功打印出Django API返回的JSON。同样，我可以在开发人员工具的“网络”标签中看到请求按预期进行了。

这里可能出什么问题了？为什么状态无法正确更新带有返回的JSON？

Answer 1

如评论中所述，本教程有一个错字，这意味着代码尝试访问response.data.data而不是response.data。

解决方法是删除此对象的额外层次：

componentDidMount() {
    var self = this;
    goalService.getGoals().then(function (result) {
        self.setState({ goals: result }) // no .data
    });
}

另外，请注意，您可以使用箭头功能（从定义的位置自动绑定this）和对象初始化的缩写来简化此代码：

componentDidMount() {
    // { goals } is the same as { goals: goals }
    goalService.getGoals().then(goals => this.setState({ goals }));
}

setState（）导致状态变量未定义

1 个答案: