Question

我有一个动作对后端进行api调用，以检索对象数组。然后，该动作将更新分派给状态变量。此时，我遇到以下错误：

Objects are not valid as a React child (found: object with keys {x, y}). 
If you meant to render a collection of children, use an array instead.

以下代码已被最小化，仍然会产生错误：

getDonationData : (reportType, recordCount) => (dispatch => {
    return Axios.post(`http://localhost:4000/reports/`,
      {
      reportType, recordCount
    }
    )
      .then(apiResponse => {
        const returnedArray = apiResponse.data;
        dispatch({
          type : 'reportData',
          payload : [{x: 1, y: 2}, {x: 4, y: 3}]
        })
      })
  })

如果用[1, 2, 3]之类的数字替换数组中的对象，则错误消失。

有人知道为什么会这样吗，以及如何解决可能的嵌套限制吗？我的实际数据有大约500个项目，x值也是日期对象（这是图表数据）。

减速器代码：

case 'reportData':
      return {
        ...previousState,
        reportData : action.payload
      };

Answer 1

此错误可能是由于您正在访问reportData的组件引起的，可能是您试图显示ex. {x:1, y:2}中的对象（reportData）而不是单个数据（例如{{1 }}。

Redux.js：无法渲染对象数组

1 个答案: