Question

已解决：解决方案位于底部

我有一个下拉菜单，可以更改组件的当前状态。像这样：

<select onChange={event => this.setState({typeofList: event.target.value})}>
  <option value="list.A">List A</option>
  <option value="list.B">List B</option>
</select>

问题在于，当我设置状态时，只要单击菜单中的某个项目，就会抛出错误。这是因为我有一个函数可以更改我用于列表的JSON。这是一段代码：

JSON

const list = require("./list.json")

list.json很大，但看起来像这样：

{
    "A":{
        "objects":{
            "term":["ball"],
            "image":["./img/ball"]
        }
    },
    "B":{
        "objects":{
            "term":["stick"],
            "image":["./img/stick"]
        }
    },
}

国家

constructor(props){
super(props)

        this.state={
            term:'',
            typeofList: list.A
        }
    }

抛出错误的函数

createArr(){
    let item = this.state.typeofList.split(/(\s)/)
    let arr = []
    for(var i=0;i<item.length;i++){
        if(/(\[(.*?)\]|\((.*?)\))/g.test(item[i])){
            arr.push(item[i])
        }
        for (var key in this.state.typeofList){
            for(var j=0;j<this.state.typeofList[key].term.length;j++){
                if (this.state.typeofList[key].term[j] === item[i]){
                    arr.push(item[i])
                }
            }
        }
    }
    return arr
}

控制台说＆＃34; TypeError：无法读取属性＆＃39;长度＆＃39;未定义＆＃34;。此功能有效，直到我单击另一个列表来更改状态。我不确定这是不是很好的做法。我该如何更改JSON中的列表？

解决方案：我以错误的方式调用了JSON对象。我所做的是将typeofList分配给这样的字符串：

constructor(props){
  super(props)

  this.state={
    term:'',
    typeofList: "A"
  }
}

然后使用[this.state.typeofList]调用它，而不是只键入this.state.typeofList。我可以通过输入list[this.state.typeofList][key]

来获取密钥

Answer 1

“TypeError：无法读取未定义的属性'length'，因为您已将this.state.typeofList[key]的值设置为字符串。因此，this.state.typeofList[key].term变得不确定。

onChange={event => this.setState({typeofList: event.target.value})}

event.target.value是一个字符串

我猜你需要更新term的值而不是

Reactjs - 根据状态更改JSON

1 个答案: