Question

我想显示我在Json中拥有的元素列表。

json例如：

[{“ 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>

但是我有错误 TypeError：无法读取null的属性“地图”

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

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

你知道如何解决吗？

Answer 1

您需要修正示例：

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>
  );
}

map是array的一种方法，如果您怀疑自己的值是一个数组，可以执行以下操作：

  const items = [...jsonList].map(item => <li key={item.res}>{item.res}</li>);

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>);

最后，如果在初始化组件期间您的值为null，则可以执行以下操作：

  const { JsonList: jsonList = [] } = this.state; 
  // or instead doing this in render, do it during state initialization

请注意，当我们尝试访问TypeError: Cannot read property 'map' of null上的.map时，null是一个显式错误。

Answer 2

您正面临此问题，因为在呈现方法调用期间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>
 );  
}

希望这会有所帮助！

Answer 3

您也可以使用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);
}'

Array.map返回无法读取null的属性映射

3 个答案: