Question

我使用以下代码将我的json结构化值附加到状态变量：

var value = JSON.stringify({"id":event.target.name,"amount":event.target.value})

this.setState({temp:[...this.state.temp, value]},function () {
    console.log(this.state.temp);
});

我的结果是：

["{"id":"1","amount":"10"}","{"id":"2","amount":"20"}"]

如何重新构建如下：

[{"id":"1","amount":"10"},{"id":"2","amount":"20"}]

更新：当我像这样删除JSON.stringify时 var value = {"id":event.target.name,"amount":event.target.value}我得到了null数组

Answer 1

那是因为你在值（对象）上使用stringify，它将返回一个字符串，然后你将该字符串推入状态数组。

避免stringify并直接推送该对象。

像这样：

var value = {"id": event.target.name, "amount": event.target.value};

this.setState(
    prevState => ({ temp: [...prevState.temp, value] }), 
    () => { console.log(this.state.temp);}
);

建议：

使用updater function代替在this.state方法中使用setState。

Answer 2

试试这个，不需要使用JSON.stringify

var value = {"id":event.target.name,"amount":event.target.value}
    this.setState({temp:[...this.state.temp, value]},function () {
         console.log(this.state.temp);
    });

Answer 3

JSON.stringify从JS对象创建一个字符串。这就是为什么所有对象都被数组中的引号包围的原因。

试试这个。

var value = {"id":event.target.name,"amount":event.target.value};

this.setState({temp:[...this.state.temp, value]},function () {
  console.log(this.state.temp);
});

Answer 4

选项1：删除

var value = JSON.stringify({"id":event.target.name,"amount":event.target.value});

选项2：使用方法：

JSON.parse(value);

ReactJS如何更改JSON.stringify值？

4 个答案: