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钩子。使对象成为初始状态，并使用react钩子更改子级。 bt这给出了一个错误 “ TypeError：setUser.name不是函数 “

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

让我们看一下User和setUser的值

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

React.useState返回一个值和该值的设置器。 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];
};

它提供了一种更容易/更简洁的方法来更新name属性的值。

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

Answer 3

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

  const handleChange = event => {
    const { name, value } = event.target;
    setUser({ ...User, [name]: value });
  };
  return (
    <div>
      <input value={User.name} name="name" onChange={handleChange} />
    </div>
  );
};

Answer 4

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 5

想尝试这种自定义钩子形式吗？

下面的代码示例：

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initialise the hook
  const onSubmit = (data) => { console.log(data) } // callback when validation pass

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> {/* register an input */}

      <input name="lastname" ref={register({ required: true })} /> {/* apply required validation */}
      {errors.lastname && 'Last name is required.'} {/* error message */}

      <input name="age" ref={register({ pattern: /\d+/ })} /> {/* apply pattern validation */}
      {errors.age && 'Please enter number for age.'} {/* error message */}

      <input type="submit" />
    </form>
  )
}

github：https://github.com/bluebill1049/react-hook-form

API文档：https://react-hook-form.now.sh/

用形式反应钩子

5 个答案:

UseObjState挂钩