如何在反應中將我的值添加到表中

Question

我正在嘗試制作表單項目。 當人提交個人信息以形成。 我想將此信息添加到表中。 但是當我向表中添加信息時出現此錯誤。

未捕獲的錯誤：對象作為 React 子項無效（發現：object 和鍵 {inputValue}）。 如果您打算渲染一組子項，請改用數組。

我知道這與 const newToTable 部分有關。 但我不知道如何使它正確。 請幫助我，如果你知道如何解決這個問題。

這是我的contact.js

const buttonOnClick = () => {
    if (inputValue === "" || emailValue === "" || phoneNumberValue === "") {
      setShowModal(false);
    } else {
      setShowModal(true);
      // setInputValue("");
      //setEmailValue("");
      //setPhoneValue("");
      // sa
    }
    
      const newToTable = [...addFormData, { fullName:{inputValue},email:{emailValue}, phoneNumber:{phoneNumberValue},country:{countryValue} }];
      setAddFormData(newToTable);
  
    console.log(`Form submitted, ${showModal}`);

  }

這是我的 AddTable.js

 <div className="app-container">
        <form>
            <Table>
                <thead>
                    <tr>
                        <th>Full Name</th>
                        <th>Email </th>
                        <th>Phone Number</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>

                    {addFormData.map((addForm) => (
                        <tr>
                            <td>{addForm.fullName}</td>
                            <td>{addForm.email}</td>
                            <td>{addForm.phoneNumber}</td>
                            <td>{addForm.counry}</td>
                        </tr>
                    ))}

                </tbody>
            </Table>
        </form>
    </div>

Answer 1

您不小心將表單值包裝在對象中：

const newToTable = [...addFormData, { fullName:{inputValue},email:{emailValue}, phoneNumber:{phoneNumberValue},country:{countryValue} }];

例如fullName:{inputValue}將評估為fullName: { inputValue: 'the value' }

相反，您需要：

const newToTable = [
  ...addFormData,
  {
    fullName: inputValue,
    email: emailValue,
    phoneNumber: phoneNumberValue,
    country: countryValue,
  },
];

這就是錯誤的含義Objects are not valid as a React child - 當它嘗試渲染您的表時，傳遞的值是諸如{ inputValue: 'the value' }類的對象（這是(found: object with keys {inputValue})部分錯誤 - 以inputValue作為鍵的 object)。