更改作为对象的 State Hook 值的问题答案

【问题标题】：Problem with changing values of State Hook which is an object更改作为对象的 State Hook 值的问题
【发布时间】：2022-01-03 15:04:45
【问题描述】：

我有一个相当简单的问题。

我不知道为什么我的 useState 函数不会改变状态 -> props

onChangeText={(text) => {
  setProps({ ...props, inputValue: text });
}}

我在这里宣布我的状态：

const [props, setProps] = useState({
  pageNumber: 2,
  inputValue: "",
});

提前致谢！

【问题讨论】：

我对你的代码没有任何问题。您的输入元素应如下所示：<input onChange={(e)=> onChangeText(e.target.value)}/> 这样您的状态将被更新。
为什么您认为状态更新不起作用？添加更多详细信息。
@RameshReddy 我刚刚更新了我的评论
@IsiakaLukmanBamidele 我的评论是给亚当的
亚当，你登录时text的内容是什么？通常onChange 回调返回一个对象而不是字符串，因此您可能需要执行类似text.target.value 的操作

标签： javascript reactjs react-native react-hooks use-state

【解决方案1】：

更新函数接收到的prevState 保证是最新的。它是对应用更改时组件状态的引用。 Official docs

onChange={(event) => {
    setProps(prevState => {
       return { ...prevState, inputValue: event.target.value }
    });
}}

另外，如果您有 input，只需使用原生事件 onChange 而不是自定义 onChangeText

【讨论】：

功能更新肯定更好但是让OP确认问题

【解决方案2】：

您写的是“onChangeText”而不是“onChange”。而且，它为您提供事件对象而不是文本本身。应该是这样的：

    <input onChange={(event) => {
        setProps({ ...props, inputValue: event.target.value });
      }} />

【讨论】：

为什么你认为onChangeText 被用作输入元素的道具？
@RameshReddy 我看不到其他可能的上下文...我自己尝试过，这是唯一在他的示例中不起作用的东西。他没有给出任何背景，那我怎么知道？...
没错，你不应该假设上下文和答案。等到问题可以回答。

【解决方案3】：

你做的是对的，没有错。

你需要将你的状态值传递给输入

import { useState } from "react";

export default function App() {
  const initialState = {
    pageNumber: 2,
    inputValue: ""
  };

  const [props, setProps] = useState(initialState);

  const textInputChangeHandler = (e) => {
    setProps({ ...props, inputValue: e.target.value });
  };

  return (
    <div className="App">
      <input
        value={props.inputValue}
        type="text"
        onChange={textInputChangeHandler}
      />
    </div>
  );
}

【讨论】：