Question

为了节省代码输入，我的代码设置正好是like this。一切正常。现在，让我们说我需要从count（州）的API中提取初始代码。怎么做？

// ./src/modules/counter.js

import axios from 'axios'

[...]

const FETCHED_COUNT = []
axios.get(<http>).then(res => FETCHED_COUNT.push(res.data))

console.log( FETCHED_COUNT[0] ) // undefined

const initialState = {
  count: FETCHED_COUNT,
  isIncrementing: false,
  isDecrementing: false
}

[...]

在控制台日志中，我需要来自api的数据，但它已经嵌套了一点。它是一个数组，所以我很困惑为什么它没有定义。

获取的api数据：

{
 "counts": [
   { "id": 1, "count": 20 },
   [...]
 ]
}

我的两分钱说你的开发人员没有使用这种方法。如何设置一个初始状态，使用axios，从您的API中获取？基本上，在页面加载时，应该从axios返回的数据更新状态

Answer 1

我认为api调用将在您的页面加载后进行，即您必须在componentWillMount()或componentDidMount()中触发操作。

api调用是异步的，因此console.log( FETCHED_COUNT[0] )始终为undefined，因为在console.log(...)语句执行时，axios promise将无法解析。

如果您将console.log放在axios(<http>).then((res) => {....// put console.log here})内，那么您将看到预期的响应。所以你需要在api调用返回后更新状态。

对于这种情况，最好用空数组初始化redux初始状态。

const initialState = {
  count: [],
  isIncrementing: false,
  isDecrementing: false
}

现在，在api调用之后，发出一个动作，用{api>获取的值更新state.count。

axios.get(<http>).then(res => {
  dispatch(UpdateCount(res.data))
})

您的Reducer应该听取UpdateCount操作，并使用从api获取的值更新state.count。

如何在页面加载的redux中设置状态

1 个答案: