与对象反应状态挂钩

Question

const App = () => {
  const [User, setUser] = useState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });
  return (
    <div>
      <input value={User.name} onChange={e => setUser.name(e.target.value)} />
    </div>
  );
};

我正在使用 React Hooks。我将初始状态设置为一个对象。我尝试使用反应挂钩更改值，但这会产生错误 TypeError: setUser.name is not a function

Answer 1

setUser 是一个用于更新状态的函数，因为它只是替换状态，所以您也需要合并以前的状态值。事件在回调中被清除，因此您需要在使用 setUser 的回调之前获取值。最好为此编写一个处理函数。您也可以编写一个通用函数来处理所有值的设置

const App = () => {
      const [User, setUser] = React.useState({
        id: 1,
        name: "ed",
        age: Number,
        edit: false
      }); 
      const handleChange = (e) => {
         const {value, name} = e.target;
         setUser(prev => ({...prev, [name]: val}))
      }
      return (
        <div>
          <input value={User.name} onChange={handleChange} />
        </div>
      );
    };
    ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app" />

Answer 2

setUser 是一个与 setState 相同的函数。有关详细信息，请查看 hooks

  <input 
    value={User.name}
    onChange={e => setUser(prev => ({...prev, name: e.target.value}))}
  />

在您的上下文中：

const App = () => {
  const [User, setUser] = useState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });
  return (
    <div>
      <input 
        value={User.name}
        onChange={e => setUser(prev => ({...prev, name: e.target.value}))}
      />
  );
};

Answer 3

让我们看看User和setUser的值

const [User, setUser] = useState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });

React.useState returns 一个值和一个 setter 该值。 setUser 是一个函数。所以虽然 User.name 是一个初始值为 "ed" 的字符串，但 setUser.name 不存在。错误 TypeError: setUser.name is not a function 是试图将未定义的值传递给参数的结果。解决这个问题的一种方法是 Murtaza Hussain 和其他答案所建议的：

  <input 
    value={User.name}
    onChange={e => setUser(prev => ({...prev, name: e.target.value}))}
  />

作为替代方案，您可以使用自定义 useObjState 挂钩，它提供了一个相当简单的 API。

UseObjState 钩子

const useObjState = initialObj => {
  const [obj, setObj] = React.useState(initialObj);
  const setObjHelper = useMemo( () => { // the value of setObjHelper is permanent, so even if it is passed to a child component, it shouldn't require extra component updates
    const helper = {}
    Object.keys(initialObj).forEach(key => {
      helper[key] = newVal => setObj({ ...obj, [key]: newVal });
    });
    return helper
  }, [])
  return [obj, setObjHelper];
};

它提供了很多 easier/cleaner 方法来更新名称属性的值。

function App() {
  const [user, setUser] = useObjState({
    id: 1,
    name: "ed",
    age: Number,
    edit: false
  });

  return (
    <input 
      value={user.name} 
      onChange={e => setUser.name(e.target.value)} />
    />
  )
}

Demo

与对象反应状态挂钩

React state hook with an object

javascript

reactjs

react-hooks

UseObjState 钩子