Блог

У меня есть форма в react.js в которой есть некоторые поля, которые в конечном итоге сохраняются в базе данных при отправке. Но я хочу добавить динамические поля ввода, которые в конечном итоге сохраняются в базе данных в виде массива. Код интерфейса приведен ниже, и он работает, но данные, которые я пишу в этих полях, не сохраняются в базе данных.

    const linksTemplate={linkName:"",link:""}
    const [downloadLinks,setDownloadLinks] =useState([linksTemplate])

  const addLink=()=>{
      setDownloadLinks([...downloadLinks,linksTemplate])
  }
  const changeHandler=(e,index)=>{
      const updatedLink=downloadLinks.map((newLink,i)=>index===i ? Object.assign(newLink,{[e.target.name]:e.target.value}):newLink)
  setDownloadLinks(updatedLink);
  console.log(updatedLink)
  }

  const removeLink=(i)=>{
      const filteredLinks=[...downloadLinks]
      filteredLinks.splice(i,1);
      setDownloadLinks(filteredLinks)

  }
    const publish = e => {
        e.preventDefault();
        createMaterial(formData, token).then(data => {
            if (data.error) {
                setValues({ ...values, error: data.error });
            } else {
               
                setDownloadLinks([...downloadLinks,[{linkName:"",link:""}]])
            }
        });
    };

return(
<form  onSubmit={publish}>
{downloadLinks.map((exactLink,index)=>(

    <div className="p-1 my-1" key={index} style={{border:'1px solid #00c1b2',borderRadius:'0.6rem'}}>
            <div className="form-group">
                <input type="text" placeholder='Title of Link' name="linkName" value={exactLink.linkName} onChange={e=>changeHandler(e,index)} />
            </div>
            <div className="form-group">
                <input type="text" placeholder='Link' value={exactLink.link} name="link" onChange={e=>changeHandler(e,index)} />
            </div>
            <button className="btn nbtn btn-primary m-1" onClick={addLink}>Add</button>
            <button className="btn nbtn btn-danger" onClick={removeLink}>Delete</button>

            </div>

))}

</form>

 

Я предполагаю, что проблема заключается в названии полей. Пожалуйста, помогите, если вы обнаружили что-то не так с кодом.

Внутренний код является:

 exports.create = async (req, res) => {
    try {
         let form = new formidable.IncomingForm();
     form.keepExtensions = true;
     form.parse(req, (err, fields, files) => {
         if (err) {
             return res.status(400).json({
                 error: 'Image could not upload'
             });
         }
 
 const 
{title,forSlug,subtitle,language,desc,materialCategories,mainCat,subCat,standard,materialType,linkName,link, body } = fields;
 
  
 
 
         let material = new Material();
         material.materialType =materialType;
         material.downloadLink.linkName =linkName;
         material.downloadLink.link =link;



 
         material.save((err, result) => {
             if (err) {
                 console.log(err)
                 return res.status(400).json({
                     error: errorHandler(err)
                 });
             }
 
    } catch (err) {
         console.error(err.message);
          res.status(500).send('Server error');
    }
 };