react-redux做todolist删除时，list值改变了但是不重新渲染

来源：6-12 使用React-redux完成TodoList功能

HeyAubrey

2018-10-15

老师你好，我这里做todolist的删除时，点击li标签以后 list的值打印出来看已经改变了，在reduxdevtools里看值，list也变了，但是li没有重新渲染，‘！！${item}’ 这个没有打印。但是在input框里再次输入，就能渲染出删除后的正确的list内容的li。麻烦老师帮我看下～

<ul>
  {this.props.list.map((item, index) => {
    console.log('!!', item)
    return (
      <li key={index} onClick={this.props.deleteItemClick.bind(this, index)}>
        {item}
      </li>
    )
  })}
</ul>

// mapDispatchToProps中的方法
deleteItemClick(index) {
   console.log(this.props.list)
   const action = getDeleteItemAction(index)
   dispatch(action)
   console.log(this.props.list)
}

// actionCreator中
export const getDeleteItemAction = value => ({ type: DELETE_TODO_ITEM, value })

// reduce中
if (action.type === DELETE_TODO_ITEM) {
   const newState = Object.assign({}, state)
   newState.list.splice(action.value, 1)
   return newState
}

在[1,2,3,‘hello aubrey’] list的情况下连续点击两次2所在的位置的时候的console和reduxdevtools的截图：
图片描述

然后在input框中输入1

写回答

2回答

慕码人7115446

2019-10-01

reducer中，我用const newState = Object.assign({}, state)或者const newState = {...state}发现不会重新渲染，用深拷贝会重新渲染。

hellocp7

但是{...state}也是深拷贝啊。。。为什么不会重新渲染呢。。。我也有这个疑问

2020-08-06

共1条回复

itellboy

2018-10-17

<li key={index} onClick={() => this.props.deleteItemClick(index)}>
  {item}
</li>

React零基础入门到实战，完成企业级项目简书网站开发

主流新技术 React-redux，React-router4，贯穿基础语法

5275 学习 · 2493 问题

查看课程

相似问题

todolist中的输入框中，剩下一个数字时无法删除

回答 1

老师 react-redux是不是依赖redux 还是说只是redux的升级版

回答 1

Module not found: Can't resolve 'redux' in 'E:\react\初识react\todolist\src\store'

回答 2

immutable & react-redux

回答 2

老师,虚拟DOM原理中,DocumentFragment属于文档碎片的JS对象,怎么和一个html文档(并非对象)对比呢?

回答 3

打开慕课网App查看更多内容