未处理的拒绝（TypeError）：无效的解构不可迭代实例的尝试

Question

我正在尝试学习地图方法。如果我使用这种语法response.data.map(d =>，我可以迭代数据数组并查看结果，但如果我使用这种语法response.data.map(([label, CustomStep]) => {，我会收到以下错误：

Unhandled Rejection (TypeError): Invalid attempt to destructure non-iterable instance

你能告诉我如何解决它，以便我以后自己解决它吗？

在下面提供我的代码sn-p：

axios
.get('http://world/sports/values')
.then(response => {
    console.log("sports--->", response.data.map(d => d.customFieldValueName));
    //this.setState({ playerRanks: response.data.map(d => d.customFieldValueName) });
    // es6 map
    //Unhandled Rejection (TypeError): Invalid attempt to destructure non-iterable instance
    this.setState({
        playerRanks: response.data.map(([label, CustomStep]) => {
            label.customFieldValueName
        })
    })
})

更新 1：

嘿，我在控制台看到，data是一个数组，里面有这么多对象

 data: Array(19)
        [
            {
                "customFieldValueCode": "player1",
                "customFieldValueName": "player1",
                "isActive": "Y"
            },
            {
                "customFieldValueCode": "player 2",
                "customFieldValueName": "player 2",
                "isActive": "Y"
            }
        ]

Answer 1

在这种情况下，您应该确定response.data 是一个数组数组，因为对于response.data.map 的每次迭代，您提供给map 的函数必须接收一个数组才能成功拉取label 和 CustomStep 值，这是由于您解构函数参数所使用的语法。

假设下面示例中的data 是response.data，而parseData 函数是您传递给map 的函数：

let data = [
  [{ customFieldValueName: 'field name' }, { stepData: {} }],
  [{ customFieldValueName: 'another field name' }, { stepData: {} }]
];

let parseData = ([label, CustomStep]) => console.log(label.customFieldValueName);

parseData(data[0]); // prints out 'field name'

否则，如果 response.data 是一个对象数组，这似乎是因为您能够成功运行 response.data.map(d => d.customFieldValueName)，您可以将您的地图更新为此（如果您只是想拉 @987654333 @value 出对象）：

response.data.map(({ customFieldValueName }) => customFieldValueName)

Answer 2

编辑：

根据提供的数据结构，您可以将代码修改为...

axios
.get('http://world/sports/values')
.then(response => {
    this.setState({
        playerRanks: response.data.map(obj => {
            return obj.customFieldValueName
        })
    })
})

或

    ...
    response.data.map(({customFieldValueName}) => {
        return customFieldValueName;
    })
    ...

甚至……

    ...
    response.data.map(({customFieldValueName}) => customFieldValueName)
    ...

但这将是我推荐的解决方案，为您的数据提供类型检查和适当的错误处理......

axios
.get('http://world/sports/values')
.catch(err=> console.log(err))
.then(({data}) => {                       // Axios always returns an Object, so I can safely 'attempt' to destructure 'data' property 
    if (data && data.length) {            // making sure 'data' does exist, it is an Array and has > 0 elements
      this.setState({
        playerRanks: data.map(obj => {    // Not destructuring here in case obj isn't actually an Object
            if (obj && obj.customFieldValueName) return customFieldValueName;
            return null;
        }).filter(elem=> elem)            // BIG-O notation: This sequence is O(2N), as in iterates over the entire Array first with .map(), then iterates over the entire Array again with .filter() to clear out 'null' values
      })
    }
})

为了防止上面返回的 Array 在不符合我们的断言时包含一堆 null 元素，您可以使用 Array.reduce() 方法“过滤”掉任何 nulls.. .

axios
.get('http://world/sports/values')
.catch(err=> console.log(err))
.then(({data}) => {                       // Axios always returns an Object, so I can safely 'attempt' to destructure 'data' property 
    if (data && data.length) {            // making sure 'data' does exist, it is an Array and has > 0 elements
      this.setState({
        playerRanks: data.reduce((acc,obj) => {    // Not destructuring here in case obj isn't actually an Object
            if (!obj || !obj.customFieldValueName) return acc; // If it doesn't meet assertions just return the existing accumulator (don't add another element .ie 'null')
            return [                        
                ...acc,                      // If it conforms to the assertions the return a new accumulator, by first spreading in all existing elements and the adding the new one (customFieldValueName)
                customFieldValueName
            ]
        },[])                      // BIG-O notation: This is O(1N) or O(N), as in it will only iterate over the Array one time and the reduce() function will filter out 'null' values at the same time
      })
    }
})

注意： 我还在第一个示例的末尾添加了.filter(elem=> elem)，它与新的.reduce() 功能相同，但在1N 而不是2N 操作中这样做。 p>

预先记录的数据

Array.map() method 的工作原理如下...

[1,2].map(element=> {
// element === 1, first iteration,
// element === 2, second iteration
})

Array destructuring 的工作原理如下...

[one, two, ...theRest] = [1,2,3,4,5]

// one === 1 and two === 2 and theRest = [3,4,5]

Object destructuring 的工作原理如下...

{one, three, ...theRest} = {one: 1, two: 2, three: 3, four: 4, five: 5}

// one === 1 and three === 3 and theRest === {two: 2, four: 4, five: 5}
// notice order doesn't matter here (three vs two), but you need to access valid properties from the object you're deetructuring from

因此，根据您的功能结构方式，您假设response.data 的数据结构是...

response.data === [ 
   [ 
     { customFieldValueName: 'any value' }, // label
     {}                                     // CustomStep (this could be any value, not necessarily an Object) 
   ],
   [ 
     { customFieldValueName: 'any value' }, // label
     'any value'                            // CustomStep
   ]
]

我希望这在概念上有所帮助，但如果您想要一个可行的解决方案，我们将需要...

1. response.data 的数据结构。你能提供console.log( JSON.stringify( response.data, null, 5) )的结果吗？
2. 您尝试分配给新 this.state.playerRanks 数组的特定值。

PS：使用当前代码查看对象解构的一个好方法是更改​​...

.then( response => {

到

.then( ({data}) => {