如何从 React 中的 Flux 调度程序获取对象数组？

Question

在我的前端，我使用 Flux 调度程序运行 React。我也在运行 web-pack-dev 服务器。

在研究了“Unexpected Token”错误后，我不断得出这个解决方案：babel-loader jsx SyntaxError: Unexpected token

但是，我的 webpack.config.js 文件中包含了这个预设，并且只有在 Flux 的调度程序中包含一个数组时才会出现这个错误。我在下面包含了我为测试而构建的功能。这在只传递一个对象时完美运行，但在传递数组时会引发错误。

Module build failed: SyntaxError: /Users/foo/sites/app/js/actions/TripActions.js: Unexpected token (33:6)
  31 |              country: "Spain",
  32 |              complete: false
> 33 |          },
     |           ^
  34 |          {
  35 |              id: 987655432,
  36 |              text: "Another Great Flat!",

我正在测试的函数

export function reloadTrip() {

    dispatcher.dispatch({type: "FETCH_TRIPS"});

    setTimeout(() => {


        dispatcher.dispatch({type: "RECIEVE_TRIPS", [
            {
                id: 123456789,
                text: "Nice flat for you and me",
                city: "Madrid",
                country: "Spain",
                complete: false
            },
            {
                id: 987655432,
                text: "Another Great Flat!",
                city: "Paris",
                country: "France",
                complete: true
            }
       ]});


    }, 1000);
}

Answer 1

您将一个对象传递给dispatcher.dispatch，但该对象有一个键/值 ({type: 'RECEIVE_TRIPS'}) 和一个数组 ([{...}, {...}])。数组无效，对象需要键/值。

通过：

{
    type: 'RECEIVE_TRIPS',
    trips: [{...}, {...}],
}

你应该做得更好。

要测试 Babel 是否按预期工作，请在命令行上使用无错误（即：简单）脚本进行尝试。