problem description
TODO List case, delete action data of list and do not re-render UI
the environmental background of the problems and what methods you have tried
redux-devtools-extension plug-in, check the data changes after action is triggered, and find that everything is normal.
related codes
reducer
import React, {Fragment } from "react"
import {connect} from "react-redux"
const TodoList = (props) => {
const {list, inputValue, handleClick, handleDelete, handleInputChange} = props
return (
<Fragment>
<input onChange={handleInputChange} value={inputValue}></input>
<button onClick={handleClick}></button>
<ul>
{
list.map((item, index) => {
return <li key={index} onClick={() => {handleDelete(index)}}>{item}</li>
})
}
</ul>
</Fragment>
)
}
const mapStateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list
}
}
const mapDispatchToProps = (dispatch) => {
return {
handleInputChange(e) {
const value = e.target.value
const action = {
type: "change_input_value",
value
}
dispatch(action)
},
handleClick(){
const action = {
type: "submit_input_value"
}
dispatch(action)
},
handleDelete(index){
const action = {
type: "delete",
index
}
dispatch(action)
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)what result do you expect? What is the error message actually seen?
there are no errors, but after clicking on the newly added list item, the data state changes, but the page UI does not change.