隐藏输入不会将值传递给服务器答案

【问题标题】：Hidden input does not pass the value to the server隐藏输入不会将值传递给服务器
【发布时间】：2021-09-23 08:44:09
【问题描述】：

我的表单中有几个输入字段，它们正在传递给服务器，但其中一个输入被隐藏并设置了值，不幸的是我没有从该输入获取数据。

传递值的 HTML FORM 和输入示例：

<form onSubmit={handleSubmit} data-netlify="true" method="post">                                
       <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)}></input>

隐藏输入示例，不传递值

<input type="hidden" name="cart" value={myJSON}></input>

每个值都存储为一个状态

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [company, setCompany] = useState('');
const [message, setMessage] = useState('');
const [cart, setCart] = useState('');

我的手柄提交：

const handleSubmit = (e) => {
        e.preventDefault();
        if (name && emailIsValid(email) && phone && company && message && cart) {
            fetch('/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: encode({
                    'form-name': 'landing-form',
                    name: name.trim(),
                    email: email,
                    phone: phone,
                    company: company,
                    message: message,
                    cart: cart,
                }),
            })
                .then((res) => {
                    redirectAfterSubmission();
                })
                .catch((error) => alert(error));
        }
    };

隐藏输入的值 - {myJSON} 是一个漂亮的对象数组，已被挑选到“购物车”，console.log(myJSON) 显示正确的值，所以我不知道为什么它不会传递给我的服务器。

【问题讨论】：

为什么需要隐藏输入？您可以直接在您的 fetch 正文中发送该购物车值。或者你可以初始化你的状态，比如 const [cart, setCart] = useState(myJSON);如果您真的需要它并发送该值并在某些 API 中读取它，我无论如何都会在该输入值中使用 JSON.stringify。
myJSON 已经是 JSON.stringify const myJSON = JSON.stringify(updatedCart, null, 4) 的版本，我如何将 cart 直接传递到正文中？我想做隐藏的输入来包含我的购物车，所以它可以和我的表单一起发送。

标签： javascript reactjs forms input

【解决方案1】：

我能够弄清楚 - 我在 handleSubmit 中传递了错误的值：

body: encode({
                'form-name': 'landing-form',
                name: name.trim(),
                email: email,
                phone: phone,
                company: company,
                message: message,
                cart: myJSON,    // cart value is replaced by myJSON
            }),

我删除了const [cart, setCart] = useState('');，因为我没有用它做任何事情。

我也将输入更改为文本区域，但我认为其中任何一个都应该工作：

<textarea hidden name="cart" value={myJSON}></textarea>

【讨论】：