Javascript 数组未正确显示在列表中

我在列表中显示数组时遇到问题

我的Ajax请求的响应如下所示：

[{"id":"1","counter":"1"},{"id":"2","counter":"2"},{"id":"3","counter":"3"}]

 <ul>
  {this.props.items.map((item, i) => <li key={i}>{item}   </li>)}
 </ul>

我的行动代码：

export default function getItems(){
return (dispatch, getState) => {
    return dispatch (fecthItem())
    }
 }

 function fecthItem(){
    return dispatch => {
      // dispatch(requestPost())
       return fetch('http://localhost:444/localWebServices/getCounter.php')
        .then(response => response.json())
        .then(json => dispatch(receivePosts(json)))
     }
  }

 function receivePosts(json){
   console.log("receivePosts");
   var items = [];
   console.log(json.map( x => x.counter))
   // var items = json.map( x => x.counter);
   for (var i = 0, len = json.length; i < len; i++) {
    console.log(json[i].counter);
        items.push(json[i].counter)
    }

     return {
       type: 'RECEIVE_POSTS',
       items: items
     }
   }

目前显示的是结果，但我无法在 列表中自己的行

要显示结果的“渲染到”代码：

      <ul>
                {this.props.items.map((items, i) => <li key={i}>{items.text}   </li>)}
            </ul>

{this.props.items.map（（items，i）=>
{items.text}
）}

有人能告诉我，要在列表中正确显示这些项目，我必须做哪些更改吗

更新：

这是我的开发控制台上的一个Img。我猜我是用错误的方法创建数组的，你觉得呢

这是我的整个组件，它应该呈现列表，也许会有帮助：）

import React，{Component，PropTypes}来自“React”
从“react redux”导入{connect}
将默认类导出到列表扩展组件{
render（）{
const posts=this.props.todos
console.log（this.props.items）
const items=this.props.items
常量isEmpty=posts.length==0
返回(
梅恩·奥夫加本

{this.props.items.map（（items，i）=>
{items.text}
）}


{我是空的
？你是托多的天使吗
：iHere Ergebnisse
}
{this.props.todos.map（（todo，i）=>
{todo.text}
）}

)
}
}
const-mapStateToProp=state=>（{todos:state.addItem，items:state.getItem}）
导出默认连接（mapStateToProp）（TodoList）

这是React扩展的输出：

更新：

好的。我想这是一个非常基本的错误，因为当我尝试使用给定的索引时，项目显示正确：

  {this.props.items.map((items) => <li key={items.text}>{items.text[0]}</li>)}

{this.props.items.map（（items）=>
{items.text[0]}
）}

---

那么我该如何处理它呢？

呈现一个项目列表代码如下所示：

[{"id":"1","counter":"1"},{"id":"2","counter":"2"},{"id":"3","counter":"3"}]

 <ul>
  {this.props.items.map((item, i) => <li key={i}>{item}   </li>)}
 </ul>

{this.props.items.map（（item，i）=>
{item}
）}

---

items.text未定义，这就是为什么会出现空列表的原因最后，几个小时后，我找到了解决问题的方法。但是说清楚一点，我对此并不满意

我希望有人能向我解释如何简化数组生成过程，这是在将数据从Action传递到reducer时发生的（我猜）

目前，我在渲染组件中对数组进行了双重映射，但这不是正确的方法。所以伙计们，如果你们知道如何防止这种情况发生，如果你们能在这里做出回应，那就太好了

  {this.props.items.map((item, i) => item.text.map((text, i) => <li key={i}>{item.text[i]}</li>))}

{this.props.items.map（（item，i）=>item.text.map（（text，i）=>
{item.text[i]}
）}

---

这个现在有用

应该在减速机中返回对象而不是数组

export default (state = [], action) => {
    switch (action.type){
        case 'RECEIVE_POSTS':
            return Object.assign({}, state, {
                items: action.items
            });
            //return {
            //    ...state,
            //    items: action.items
            //}

        default:
            return state
        }
 }

然后，您可以通过

{ this.props.items.items && this.props.items.items.length &&
  this.props.items.items.map((item, i) => <li key={i}>{item}</li>)}

{this.props.items.items&&this.props.items.items.length&&
this.props.items.items.map（（item，i）=>
{item}
）

不清楚问题是逻辑问题还是显示问题。请提供一把小提琴。我想这一定是个合乎逻辑的问题。我想我是在以错误的方式从API获取后构建数组的。请给我一分钟时间从dev Console附加我的阵列的img。您可以共享处理RECEIVE_帖子的存储代码吗？在呈现之前，您是否在props中记录了items变量？存储代码和所有其他代码可以在我前面的问题中找到：。下面的代码中包含CombineReducer。@BayLife在您的两个问题中都没有包含getItem的实现，因为它填充的items变量似乎格式不正确，很可能是问题的根源。但是items.text不是未定义的，我的列表也不是空的，正如我在Q后面的最后一个img中所看到的。它只是没有正确地显示为列表。您需要在ur babel上启用transform object rest spread，或者使用es2015 babel功能设置为stage 2或更高。我更新了我的答案，没有使用扩散法。我也尝试过这样做。语法错误消失了。但是当呈现.map（）函数时，现在抛出一个错误：“bundle.js:29631 Uncaught（in promise）TypeError:this.props.items.map不是一个函数（…）”oops，它看起来像是将状态映射到props命名的项，所以在这种情况下，您需要通过this.props.items.items访问它。如果I.log（）this，items.items工作正常。但是，当尝试映射此“无法读取未定义的属性“map”时。由于尚未获取项目，您的this.props.items.items可能为null，请添加一个检查以仅呈现已获取的项目，检查我的更新答案