Question

我正在尝试向我的应用程序列表上的按钮添加功能，以便单击UP时，列表项与该项目顶部的项目直接交换。

我尝试使用函数作为我在createMockStore中的状态的值。但是当我单击按钮时，发生了此错误：

setState

这是怎么回事？这样设置状态时，不能使用函数作为值吗？

TypeError: Cannot read property 'map' of undefined
App.render
src/App.js:49
  46 | return( 
  47 |   <div>
  48 |     <h1>UNUM Challenge</h1>
> 49 |     <ol>
     | ^  50 |       {this.state.shoppingList.map((item, index) =>
  51 |          (<li data-index = {index} key={index}>
  52 |             {item}

这是完整的代码：

this.setState({
        shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1) 
})

Answer 1

返回arr.splice()将为您提供一个包含已删除元素的数组。如果仅删除一个元素，则返回一个元素的数组。如果没有删除任何元素，则返回一个空数组。

您需要像这样返回修改后的数组：

function arraymove(arr, fromIndex, toIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(toIndex, 0, element);
  return arr;
}

Answer 2

arraymove不返回，它改变列表的状态，并返回undefined。

所以打电话

shoppingList: arraymove(shoppingList, currentIndex , currentIndex - 1)

等效于

shoppingList: undefined

因此修复程序很少：

const shoppingList = [...this.state.shoppingList];
arraymove(shoppingList , currentIndex , currentIndex - 1) 
this.setState({
    shoppingList: shoppingList 
})

使用函数作为值来更改ReactJS中的状态

2 个答案: