0

我有一个带有一些空值的对象文字，我想根据输入列表进行更改。问题是，尽管输入的值在 useEffect() 中使用预定义的值进行了更新，但我无法使用 onChange 处理程序更改输入。这就是我所拥有的：

const userValues = {
  username:'',
  city:'',
  country:'',
  description:''
}

function Comp(){
 const  [details, setDetails] = useState(userValues)

 useEffect(() => {
    setUserDetails()
  }, [details])

async function setUserDetails() {
      setDetails({...details,
      username: "username",
      country: "country",
      city: "city"
      })
}
const handleInputChange = (e) =>{
    const {name,value} = e.target
    setDetails({
      ...details,
      [name]:value
    })

   <Input fontSize="20px" w="sm" mr={5} fontWeight="bold" textAlign="center" 
               value={details.username} onChange={(e)=>handleInputChange(e)}/>
}

我也尝试直接在 onChange 事件中设置值

onChange={(e)=>setDetails({...details,[e.target.name]:e.target.value})}}

但输入不会改变默认值。也许有人可以指出我正确的方向。我按照本教程https://dev.to/deboragaleano/how-to-handle-multiple-inputs-in-react-55el任何帮助将不胜感激！

4

1 回答 1

1

您必须为name输入元素设置正确的属性，例如：

  return (
    <Input

      name="userName"
      value={details.username}

      fontSize="20px"
      w="sm"
      mr={5}
      fontWeight="bold"
      textAlign="center"
      onChange={(e) => handleInputChange(e)}
    />
  )

第二个问题是如下效果：

useEffect(() => {
    setUserDetails()
  }, [details])

details每当details更改时，此代码将重置。
您将不得不删除此效果或至少details从依赖数组中删除，例如：

const  [details, setDetails] = useState(() => {
  return {
      username: "username",
      country: "country",
      city: "city"
  };
});

或者

useEffect(() => {
    setUserDetails()
  }, [])
于 2022-02-09T07:29:27.003 回答