Question

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

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

我曾经JSON.stringify()将数据发送到我的node.js后端并将它们保存到我的数据库，但是，因为我现在也允许文件上传，所以我必须使用{{1} }。当我使用FormData()时，它将我整齐地保存为一个对象数组，但现在它不再起作用了，我只是得到一个字符串数组。

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

JSON.stringify()

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

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;

但是，我需要稍后使用这些数据，直到现在，我只需映射数据并使用对象的名称来获取值。我读了几个关于这个主题的问题但没有任何帮助。我也试过[{"author" : "name", "age": 1},{"author" : "othername", "age": 144}]但是由于某种原因，这总是给我一个错误（它给了我不同的错误，其中一个是JSON在位置1有一个意想不到的字符）。那么，我如何将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);
        })

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

赞：在constructor状态未正确定义内，缺少comma。

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

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

并且你不应该在类声明中使用箭头函数，我不知道这对你有用吗！

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

1 个答案: