Me cuesta entender por qué setState en este caso no puede actualizar el objeto de estado. A continuación se muestra un ejemplo simple de mi problema.
class Temp extends Component<TempProps, TempState> { constructor(props: TempProps) { super(props); this.state = { 1: "apple", 2: "banana", 3: "pineapple" }; } onBtnClick = () => { this.setState( (prevState) => { const newState = { ...prevState }; delete newState["2"]; console.log(newState); //{ 1: "apple", 3: "pineapple" } console.log(newState === prevState); //false return newState; }, () => { console.log(this.state); //{ 1: "apple", 2: "banana", 3: "pineapple" } } ); }; render() { return ( <button onClick={this.onBtnClick}>click me</button> ); } } export default Temp;¿Por qué setState() en onBtnClick() no puede actualizar el objeto de estado, aunque prevState===newState es falso? Estoy tan confundida... ¡muchas gracias por los comentarios!
Puedes comparar dos objetos como este.
JSON.stringify(Object A) === JSON.stringify(Object B)El problema es que this.setState() realiza una combinación del estado actual y el valor proporcionado. De modo que el nuevo estado es como este newState = { ...oldState, ...suppliedValue } . Esto significa que cualquier propiedad omitida en el nuevo argumento permanecerá sin cambios. Es por eso que podría llamar a setState({ b: 22 }) en un estado que actualmente tiene { a: 11, b: 12 } y el nuevo estado sería una combinación del valor proporcionado y el valor anterior: {a: 11, b: 22} . El hecho de que haya omitido la propiedad: a en el valor proporcionado no lo eliminará del estado final.
Entonces, las únicas soluciones que conozco son:
null o undefined . Esto es feo, pero podría servir para sus necesidades. Por ejemplo, this.setState(prevState => ({ ...prevState, b: undefined })) . . . constructor(props: TempProps) { super(props); this.state = { appState: { 1: "apple", 2: "banana", 3: "pineapple" } }; } . . . onBtnClick = () => { this.setState( (prevState) => { const newState = { ...(prevState.appState) }; delete newState["2"]; console.log(newState); //{ 1: "apple", 3: "pineapple" } console.log(newState === prevState); //false return { appState: newState }; }, () => { console.log(this.state); //{ 1: "apple", 3: "pineapple" } } ); }; . . .