Javascript React | DOM操纵

反应显示{error}问题。

所以我有一个错误，我试图创建一个DOM元素，但它不想工作，即使它有一个值

• 因此，我制作了一个验证器，将一个名为'error'的空对象放入一个包含两个对象（用户名和密码）的数组中，然后它们在数组中获取字符串，其中包含文本“{value}无效”，如果输入字段为空，我希望它在DOM中显示它。但它不想这么做，这是代码

不想显示的是这些变量'{errors.password}'，它们位于最后一段代码的末尾

App.js

import React, { useState } from 'react'
import Form from './Form'
export default function App() {

const [ username, setUsername ] = useState("");

const [ password, setPassword ] = useState("");

return (
<>
  <Form
  // Username
  usernameValue={username}
  setUsernameValue={e => setUsername(e.target.value)}
  // Password
  passwordValue={password}
  setPasswordValue={e => setPassword(e.target.value)} 
  />
</>);}

import React, { useState } from 'react'

export default function Form({usernameValue, setUsernameValue, passwordValue, setPasswordValue}) {

// Easier to use names
const value = {
    username: usernameValue,
    password: passwordValue,
    errors: {}
};

// Replacement for setState(hook)
const [errors, setError] = useState({});
    
// Validator
function validate() {
    const errors = {};
    if (value.username.trim() === "") // If there is nothing in the field (trim() checks for empty-space and cuts it *normally*)
        errors.username = 'Username is invalid'
    if (value.password.trim() === "")
        errors.password = 'Password is invalid'
    
    // console.log(errors)

    return Object.keys(errors).length === 0 ? null : errors; // If errors array is equal to 0 return null, if not, return error
};

// Check for errors
function handleOnSubmit(e) { // e = event
    e.preventDefault(); // Prevent reload
    console.log(document.querySelectorAll('.div').innerHTML)

    // Set errors locally to validate()
    const errors = validate();
    setError({ errors: errors || {} }) // We don't want it to be a null, so we set it to {}, and hook state errors is equal to local errors
    if (errors) return;

    // Call when submitted
    console.log('Submitted')
};

return (
    <>
        <form onSubmit={handleOnSubmit}>
            <input value={value.username} type="text" placeholder="name" onChange={setUsernameValue} />
            <input value={value.password} type="text" placeholder="password" onChange={setPasswordValue} />

            <button type="submit" onClick={validate}>Submit</button>
        </form>
            <div className="div">{errors.username}</div>
            <div className="div">{errors.password}</div>
    </>
)

import React，{useState}来自“React”
从“./Form”导入表单
导出默认函数App（）{
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
返回(
setUsername（e.target.value）}
//密码
passwordValue={password}
setPasswordValue={e=>setPassword（e.target.value）}
/>
);}

Form.js

import React, { useState } from 'react'
import Form from './Form'
export default function App() {

const [ username, setUsername ] = useState("");

const [ password, setPassword ] = useState("");

return (
<>
  <Form
  // Username
  usernameValue={username}
  setUsernameValue={e => setUsername(e.target.value)}
  // Password
  passwordValue={password}
  setPasswordValue={e => setPassword(e.target.value)} 
  />
</>);}

import React, { useState } from 'react'

export default function Form({usernameValue, setUsernameValue, passwordValue, setPasswordValue}) {

// Easier to use names
const value = {
    username: usernameValue,
    password: passwordValue,
    errors: {}
};

// Replacement for setState(hook)
const [errors, setError] = useState({});
    
// Validator
function validate() {
    const errors = {};
    if (value.username.trim() === "") // If there is nothing in the field (trim() checks for empty-space and cuts it *normally*)
        errors.username = 'Username is invalid'
    if (value.password.trim() === "")
        errors.password = 'Password is invalid'
    
    // console.log(errors)

    return Object.keys(errors).length === 0 ? null : errors; // If errors array is equal to 0 return null, if not, return error
};

// Check for errors
function handleOnSubmit(e) { // e = event
    e.preventDefault(); // Prevent reload
    console.log(document.querySelectorAll('.div').innerHTML)

    // Set errors locally to validate()
    const errors = validate();
    setError({ errors: errors || {} }) // We don't want it to be a null, so we set it to {}, and hook state errors is equal to local errors
    if (errors) return;

    // Call when submitted
    console.log('Submitted')
};

return (
    <>
        <form onSubmit={handleOnSubmit}>
            <input value={value.username} type="text" placeholder="name" onChange={setUsernameValue} />
            <input value={value.password} type="text" placeholder="password" onChange={setPasswordValue} />

            <button type="submit" onClick={validate}>Submit</button>
        </form>
            <div className="div">{errors.username}</div>
            <div className="div">{errors.password}</div>
    </>
)

import React，{useState}来自“React”
导出默认函数形式（{usernameValue，setUsernameValue，passwordValue，setPasswordValue}）{
//更容易使用的名称
常量值={
用户名：usernameValue，
密码：passwordValue，
错误：{}
};
//调整状态（吊钩）的更换
const[errors，setError]=useState（{}）；
//验证器
函数验证（）{
常量错误={}；
if（value.username.trim（）==“”）//如果字段中没有任何内容（trim（）检查空格并将其*正常地*剪切）
errors.username='用户名无效'
if（value.password.trim（）=“”）
errors.password='密码无效'
//console.log（错误）
return Object.keys（errors）.length==0？null:errors；//如果errors数组等于0，则返回null，否则返回error
};
//检查错误
函数handleOnSubmit（e）{//e=event
e、 preventDefault（）；//防止重新加载
console.log（document.querySelectorAll（'.div'）.innerHTML）
//在本地设置错误以验证（）
const errors=validate（）；
setError（{errors:errors |{}）//我们不希望它为null，所以我们将它设置为{}，钩子状态错误等于本地错误
如果（错误）返回；
//提交时致电
console.log（'Submitted'）
};
返回(
提交
{errors.username}
{错误.密码}
)

}

问题 您的错误状态为

const [errors, setError] = useState({});

您可以通过

error.username

和

error.password

<div className="div">{errors.username}</div>
<div className="div">{errors.password}</div>

解决方案 只需使用errors对象本身更新您的状态

setError(errors);

---

为什么不在

验证中返回
错误
？您在处理程序中将其设置为
{}
。主要原因是，我的处理程序在表单元素中连接到我的onSubmit，因此它会验证是否还有任何错误，如果没有，则可以提交。非常感谢，Drew，它立即解决了问题：）也感谢Cehhiro，我可以看到，您如何将所有内容移动到验证器中，而不是使用两个函数。