将JSON解析为嵌套的对象数组

Question

我有一个ReactJS，用户可以在其中上传图像和文本输入。 表单被分为多个动态部分，每个部分都包含相同类型的信息，如下所示：

<div>
    <input placeholder="Name of the author" />
    <input type="file" />
    <input placeholder="Age of the author" />
</div>

我曾经做过JSON.stringify()将数据发送到我的node.js后端并将其保存到我的数据库，但是，由于我现在还允许文件上传，因此我必须使用FormData() 。 当我使用JSON.stringify() ，它整洁地将我保存为对象数组，但是现在不起作用了，我只是得到了一个字符串数组。

首先是我的ReactJS前端的相关代码：

class Form extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            formdata : [
                {author : "name", age: 1},
                {author : "othername", age: 144}
            ]
        }
    }
    onSubmit = (e) => {

    let formData = new FormData();

    for (var i = 0; i < formdata.length; i++) {
        formData.append('formdata', JSON.stringify(formdata[i]));
    }

    axios.post('newauthor',
        formData)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
    }

render() {
    return(
        <form onSubmit={this.onSubmit} encType="multipart/form-data">
        //Content see above
        </form>
    )
}

And in node.js I save the formdata to my database like so:

NewEntry.formdata = req.body.data;

但这将返回一个JSON对象数组，如下所示：

[{"author" : "name", "age": 1},{"author" : "othername", "age": 144}]

但是，我需要以后再使用该数据，直到现在，我才可以映射数据并使用对象的名称来获取值。 我阅读了有关此主题的几个问题，但无济于事。 我也尝试了JSON.parse但是由于某种原因，这总是给我一个错误（它给了我不同的错误，其中之一是JSON中的位置1处有一个意外字符）。 那么，如何将JSON字符串转换为对象数组？

Answer 1

答案是，您的formData的一部分被字符串化，而不是整个formdata。 您正在迭代某个对象，并在每个元素上应用JSON.stringify 。 这里：

for (var i = 0; i < data.length; i++) {
        formData.append('data', JSON.stringify(data[i]));
    }

但是在解析时，您尝试解析JSON.parse整个formdata 。

相反，在将数据发送到服务器之前，对于JSON.parse您需要对formdata数据本身进行stringify 。

将axios pst代码更改为：

axios.post('newauthor',{data: JSON.stringify(formData)}
        )
        .then(function (response) {
            console.log(response);
        })

第二，您的代码有太多错误。

像：内部constructor状态未正确定义，缺少comma 。

甚至如何编译，第一个元素后仍缺少逗号。

this.state = {
            formdata : [
                {author : "name", age: 1}
                {author : "othername", age: 144}
            ]
        }

而且您不应该在类声明中使用arrow函数，我不确定这对您有何作用！