javascript - 未处理的拒绝 (TypeError) : Invalid attempt to destructure non-iterable instance

Question

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

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

你能告诉我如何修复它，以便将来我自己修复它吗？

在下面提供我的代码片段:

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:

咦，我在console里看到，data是一个数组，里面有很多对象

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

Answer 1

编辑:

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

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 操作中执行此操作。

预先记录的数据

下面是 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( 响应 => {

到

.then( ({data}) => {