Question

如何在组件中显示以下缩减器（myData）：

const initialState = [          // <= STATE AS ARRAY
  {
    id: '01',
    name: 'Name One',
    number: 11
  },
  {
    id: '02',
    name: 'Name Two',
    number: 22
  }
];

const initialStateNew = {   // <= STATE AS OBJECT
 1: {
    id: '01',
    name: 'Name One',
    number: 11
  },
 2: {
    id: '02',
    name: 'Name Two',
    number: 22
  }
}

export default function myData (state = initialStateNew, action) {
  switch (action.type) {
    case "somthing":
      return {
        ...state
      }
    default:
      return state
   }
}

我已合并这个Reducers并将其称为myData并使用mapStateToProps和mapDispatchToProps来映射组件中的reducer。

现在，以下代码适用于使用initialState时的代码：

const renData = this.props.myData.map((data, idx) => {
  return (
    <View key={idx}>
      <TouchableOpacity
        onPress={() => Alert.alert("ID:  ", data.id)}
      >
      <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text>
      </TouchableOpacity>
    </View> 
   )
});

代码工作使它成为一个数组。如何在initialStateNew中映射对象renData？

EDIT1

this.props.newData来自mapStateToProps

const createUI = () => {
  let uiItems = [];

  for(let i in this.props.newData)
    uiItems.push(<Text key={data[i].id}> {data[i].name} </Text>)

  return uiItems;
}

在View：{createUI}中使用。得到错误：

EDIT2

const createUI = () => {
  let uiItems = [];

  for(let i in this.props.newData)
    uiItems.push(
        <Text key={this.props.newData[i].id}> 
            {this.props.newData[i].name} 
        </Text>
        )
  return uiItems;
}

const renData = this.createUI.map((data, idx) => {
  return (
    <View key={idx}>
      <TouchableOpacity
        onPress={() => Alert.alert("ID:  ", data.id)}
      >
      <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text>
      </TouchableOpacity>
    </View> 
  )
});

Answer 1

只需像这样改变你renData

const renData = Object.keys(this.props.myData || []).map((key, idx) => {
  let data = this.props.myData[key]
  return (
    <View key={idx}>
      <TouchableOpacity
        onPress={() => Alert.alert("ID:  ", data.id)}
      >
      <Text style={styles.welcome}>{data.id} - {data.name} - {data.number}</Text>
      </TouchableOpacity>
    </View> 
   )
});

修改

Object.keys(this.props.myData)返回一个键数组（如果this.props.myData是一个对象）或返回一个索引数组（即 [＆＃34; 0＆＃34;。＆＃34; 1＆＃34;，...]）如果是数组。

this.props.myData || []表示如果this.props.myData为null或undefines，则只使用一个空数组。这是因为当this.props.myData为null或未定义时，它不会抛出不必要的错误。

Answer 2

它是Loop on Object in ReactJS的副本，但OP并不想使用map这样的替代解决方案。

从render方法调用一个函数，并在对象上使用for循环来创建ui项并返回结果。

像这样：

_

createUI(){

    if(!Object.keys(data).length) return null;

    let uiItems = [];
    for(let i in data)
        uiItems.push(
            <View key={data[i].id}>
                <TouchableOpacity
                    onPress={() => Alert.alert("ID:  ", data[i].id)}
                >   
                    <Text style={styles.welcome}>{data[i].id} - {data[i].name} - {data[i].number}</Text>
                 </TouchableOpacity>
            </View> 
        )

    return uiItems;
}

render(){   
    return(
        <div>
            {this._createUI()}
        </div>
    ) 
}

检查此代码段：

＆＃13;

const initialStateNew = {  
 1: {
    id: '01',
    name: 'Name One',
    number: 11
  },
 2: {
    id: '02',
    name: 'Name Two',
    number: 22
  }
}

for(let i in initialStateNew)
  console.log('key, value = ', i, initialStateNew[i].name);

＆＃13;

如何在map对象中渲染reducer

2 个答案: