Question

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

我的Ajax-Request的响应看起来像这样：

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

我的行动守则：

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

我的减速机 - getItem：

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

   }
 }

目前显示结果，但我无法显示每个结果自己的列表行。

用于显示结果的代码渲染：

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

有人可以告诉我必须更改哪些内容才能在列表中正确显示这些项目吗？

更新：

这是我的Dev Console中的Img。我想我用错误的方式创建数组，你的想法是什么？

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

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'


 export default class TodoList extends Component {

  render() {
    const posts = this.props.todos
    console.log(this.props.items)
    const items = this.props.items
    const isEmpty = posts.length === 0
    return (

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

                {isEmpty
                    ? <h3>Sie haben noch keinen Todo´s angelegt</h3>
                    : <h3>Ihre Ergebnisse</h3>
                }
                {this.props.todos.map((todo, i) => <li key={i}>{todo.text}</li>)}
            </ul>
        </div>
        )
     }
   }
   const mapStateToProp = state => ({todos: state.addItem, items: state.getItem})

    export default connect (mapStateToProp)(TodoList)

以下是React扩展的输出：

更新：

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

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

那我该怎么办呢？

Answer 1

您应该在reducer

中返回object而不是array

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

Answer 2

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

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

items.text未定义为什么你得到空列表

Answer 3

Finally, after several hours I found a solution for my Problem. But to say it clear, I´m not happy with that!

I hope someone can explain me how to simplify the array generating process, which occurs while passing the data from Action to reducer (I guess).

Currently I double map the array in my Render component, but this can´t be the right way of doing things. So guys If you know how to prevent that, it would be lovely if you response here.

ISecurityInformation

This works for now!

数组未正确显示在列表中

3 个答案: