Javascript Array.map returns无法读取null的属性映射

我想显示Json中的元素列表

例如，json是：

render () {
  // never use upper case to store an array, try to change that as earliest as possible
  const { JsonList: jsonList } = this.state; 
  const items = jsonList.map((item) => <li key={item.res}>{item.res}</li> );
  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  );
}

[{“res”：“1030-1130”}，{“res”： “1200-1400”}，{“res”：“1800-1930”}]

我的代码是：

render () {
    const items = this.state.JsonList.map(item => <li>{item.res}</li> );
    return (
      <div>
        <ul>
          {items}
        </ul>
      </div>

render（）{
const items=this.state.JsonList.map（item=>
{item.res}
）；
返回(

{items}

但我有一个错误 TypeError:无法读取null的属性“map”

但是，如果我为this.state.JsonList创建一个console.log，它不是空的，并返回：

0:{res:“1030-1130”}1:{res:“1200-1400”}2:{res:“1800-1930”}

---

你知道怎么解决吗？

你需要修正你的例子：

render () {
  // never use upper case to store an array, try to change that as earliest as possible
  const { JsonList: jsonList } = this.state; 
  const items = jsonList.map((item) => <li key={item.res}>{item.res}</li> );
  return (
    <div>
      <ul>
        {items}
      </ul>
    </div>
  );
}

console.log

似乎表明它不是一个数组，请尝试记录它的类型

 console.log(jsonList instanceof Array); // should return true
 console.log(typeof jsonList); // should be array not a string

如果是字符串，不要忘记

JSON.parse

：

JSON.parse(jsonList).map((item) => <li key={item.res}>{item.res}</li>);

---

请注意，

TypeError:cannotread属性'map'of null

是一个显式错误，当我们试图访问

null

上的

.map

时，您会遇到这个问题，因为在render方法调用期间this.state.JsonList为null

render() {
 const { JsonList: jsonList = [] } = this.state; // if the jsonList is empty it will have default empty array value, hence null value error will not occur
 const items = jsonList.map(item => <li>{item.res}</li> );
 return (
   <div>
      <ul>
        {items}
      </ul>
    </div>
 );  
}

render（）{
const{JsonList:JsonList=[]}=this.state；//如果JsonList为空，它将具有默认的空数组值，因此不会发生空值错误
const items=jsonList.map（item=>
{item.res}
）；
返回(

{items}

);  
}

---

希望这有帮助！！

您也可以使用reduce函数代替map

'var jsonlist= [{"res": "1030-1130"},{"res": "1200-1400"},{"res": "1800-1930"}];

function appendlist(total, num) {
  return total + '<li>' + num.res + '</li><br>';
}

function render(item) {
   return jsonlist.reduce(appendlist);
}'

'var jsonlist=[{“res”：“1030-1130”}，{“res”：“1200-1400”}，{“res”：“1800-1930”}]；
函数附录列表（总计，num）{
返回total+'
'+num.res+'

'；
}
函数渲染（项目）{
返回jsonlist.reduce（appendlist）；
}'

该JsonList是数组吗？请粘贴console.log结果好吗？Thanks@tarabor：是的，这是一个数组。我编辑了答案以完成

this.state.JsonList

是

null

，不是很明显吗？试试

const items=JSON.parse（this.state.JsonList）.map（item=>
{item.res}
）

您能分享整个组件代码吗

'var jsonlist= [{"res": "1030-1130"},{"res": "1200-1400"},{"res": "1800-1930"}];

function appendlist(total, num) {
  return total + '<li>' + num.res + '</li><br>';
}

function render(item) {
   return jsonlist.reduce(appendlist);
}'