将 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，但由于某种原因，这总是给我一个错误（它给了我不同的错误，其中之一是位置 1 的 JSON 中有一个意外字符）。 那么，如何将 JSON 字符串转换为对象数组呢？

Answer 1

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

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

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

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

将你的 axios pst 代码更改为：

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

其次，您的代码有很多错误。

Like：constructor 内部状态定义不正确，缺少comma。

这是怎么编译的，第一个元素后缺少逗号。

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

你不应该在类声明中使用箭头函数，我不确定这对你有什么作用！