React：循环遍历状态中的数组

Question

我正在React中构建一个组件。在尝试循环通过一个州之前，一切似乎都很有效。

这是我的组件：

= form_for @foo do |f|
  # in here, f.object == @foo

这是有效的，在渲染函数中，cc和dd都输出一个看起来像的数组：

当我在渲染函数中循环遍历cc数组（来自状态）时：

var BidItem = React.createClass({
    getInitialState: function() {
      return {
        theMaxBid: '',
        theHighestBids: ''
      };
    },
    componentDidMount: function() {
      var $component = this;
      $.ajax({
        type : "post",
        dataType : "json",
        url : myAjax.ajaxurl,
        data : {action: "get_max_bid"},
      })
      .done(
        function(response){
          $component.setState({
            theMaxBid: response.max_bid,
            theHighestBids: response.highest_bids
          });
        }
      );
    },
    render: function() {
      var dd = [{ids:"2"}, {ids:"5"}];
      var cc = this.state.theHighestBids;
      console.log(cc);
      console.log(dd);

      return (
        <div>
           <p>Max Bid: {this.state.theMaxBid}</p>
        </div>
      )
    }
  });

我收到以下错误：

{cc.map(function(result){
            console.log(result);
          })}

但是当我遍历下面的dd数组时，它可以工作：

Uncaught TypeError: cc.map is not a function

为什么我不能循环状态数组？

Answer 1

在第一次渲染调用之后运行#!/usr/bin/env python from Queue import Queue FILENAME='words.txt' def main(): q1 = readwords() q2 = Queue() while (not q1.empty()) or (not q2.empty()): if not q1.empty(): src = 1 word = q1.get() else: src = 2 word = q2.get() ans = input('What does "'+word[0]+'" mean? ') if ans==word[1]: print 'Correct!' src += 1 else: print 'Incorrect! "'+word[1]+'"' if src==1: q1.put(word) elif src==2: q2.put(word) print 'Done! Good job!' def readwords(): with open(FILENAME,'r') as f: lines = f.readlines() first = True words = Queue() word = [None,None] for x in lines: if not x.strip(): continue if first: word[0] = x.strip() first = False else: word[1] = x.strip() first = True words.put(word) word = [None,None] return words if __name__ == '__main__': main() 函数，因此初始渲染不会有<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="fill_parent" android:background="@color/com_facebook_blue" android:fadeScrollbars="false" android:fillViewport="true" tools:context="com.example.Test.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:isScrollContainer="true" android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:weightSum="4"> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="2" android:layout_gravity="top" android:scaleType="fitXY" android:textColor="@android:color/black" /> <RelativeLayout android:id="@+id/level2" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="2" android:layout_gravity="bottom" android:background="#e0e0e0" android:orientation="vertical"> <ProgressBar android:id="@+id/progressBar2" style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:visibility="gone" /> <RelativeLayout android:id="@+id/viewPagerIndicator" android:layout_width="match_parent" android:layout_height="55dp" android:layout_alignParentBottom="true" android:layout_gravity="center_horizontal|bottom" android:layout_marginTop="5dp" android:background="@android:color/black" android:gravity="center" android:visibility="gone"> <LinearLayout android:id="@+id/viewPagerCountDots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:background="@android:color/black" android:gravity="center" android:orientation="horizontal" android:visibility="gone" /> </RelativeLayout> <RelativeLayout android:id="@+id/rela" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:background="#e0e0e0"> <ImageButton android:id="@+id/deleteButton" android:layout_width="50dp" android:layout_height="50dp" android:background="@color/transparent" android:scaleType="fitXY" android:src="@mipmap/ruhesi_delete" /> <ImageButton android:id="@+id/writeButton" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentTop="true" android:layout_marginLeft="50dp" android:layout_toEndOf="@+id/deleteButton" android:layout_toRightOf="@+id/deleteButton" android:background="@color/transparent" android:scaleType="fitXY" android:src="@mipmap/ruhesi_add" /> <ImageButton android:id="@+id/writeButtons" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentTop="true" android:layout_marginLeft="50dp" android:layout_toEndOf="@+id/deleteButton" android:layout_toRightOf="@+id/deleteButton" android:background="@color/transparent" android:scaleType="fitXY" android:src="@mipmap/ruhesi_confirm" android:visibility="invisible" /> </RelativeLayout> <RelativeLayout android:id="@+id/temelbilgiler" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/rela" android:background="#e0e0e0" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin"> <TextView android:id="@+id/temelBilgilerInfo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="18dp" android:text="@string/temelbilgileriinfo" android:textColor="@android:color/black" android:textSize="20dp" /> <View android:id="@+id/layout_root" android:layout_width="fill_parent" android:layout_height="1dip" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_below="@+id/temelBilgilerInfo" android:background="@drawable/ruhesi_lines" /> <EditText android:id="@+id/birthday_edit" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/layout_root" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit1" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit2" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit1" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit3" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit2" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit4" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit3" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday1" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit5" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit4" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthday123213" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit6" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit5" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthdayasdasdasd" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> <EditText android:id="@+id/birthday_edit7" android:layout_width="250dp" android:layout_height="wrap_content" android:layout_below="@+id/birthday_edit6" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:ellipsize="start" android:ems="10" android:gravity="center_horizontal" android:hint="Enter Birthdayasdasdasd" android:inputType="date" android:textColor="#000000" android:textColorHint="#DDAAAAAA" /> </RelativeLayout> <com.isseiaoki.simplecropview.CropImageView android:id="@+id/cropImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:visibility="gone" custom:backgroundColor="@color/base" custom:cropMode="ratio_4_3" custom:frameColor="@color/frame" custom:frameStrokeWeight="1dp" custom:guideColor="@color/guide" custom:guideShowMode="show_on_touch" custom:guideStrokeWeight="1dp" custom:handleColor="@color/handle" custom:handleShowMode="show_always" custom:handleSize="8dp" custom:minFrameSize="150dp" custom:overlayColor="@color/overlay" custom:touchPadding="8dp" /> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="72dp" android:layout_gravity="bottom" android:background="@color/black" android:visibility="gone"> <LinearLayout android:id="@+id/thumbnails" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal" android:paddingTop="2dp"> <ImageView android:id="@+id/animatedGifImageView" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" /> </LinearLayout> </HorizontalScrollView> </RelativeLayout> </LinearLayout> </ScrollView> （提示：componentDidMount）。第一次渲染渲染this.state.theHighestBid会返回highestBid，而this.state.theHighestBid函数没有。{/ p>

将''更改为#map，它会在第一次映射一个空数组，然后在组件安装时调用您的AJAX，然后您将获得一个响应将填充将再次呈现的状态。

Answer 2

  

为什么我不能循环状态数组？

因为你没有阵列！ theHighestBids: ''创建一个空字符串。

更改

getInitialState: function() {
  return {
    theMaxBid: '',
    theHighestBids: ''
  };
}

要

getInitialState: function() {
  return {
    theMaxBid: '',
    theHighestBids: []
  };
}

并确保response.highest_bid也是一个数组。