Question

所以我的减速机是：

const initialState = {
  1: {
     id: '1',
     user: 'User1',
     text: 'Dummy Text id1',
     SomeFiled: 'SomeValue',
    },
  2: {
     id: '2',
     user: 'User1',
     text: 'Dummy Text id2',
     SomeFiled: 'SomeValue',
    },
  3: {
     id: '3',
     user: 'User1',
     text: 'Dummy Text id3',
     SomeFiled: 'SomeValue',
    },
  4: {
     id: '4',
     user: 'User1',
     text: 'Dummy Text id4',
     SomeFiled: 'SomeValue',
    },
  5: {
     id: '5',
     user: 'User1',
     text: 'Dummy Text id5',
     SomeFiled: 'SomeValue',
    }
}

我mapStateToProps与道具users能够展示数据：

const renData = Object.keys(this.props.users).map((key, idx) => {
let user = this.props.users[key]
 return(
     <View key={idx} style={styles.myStyle}>
         <Text style={styles.myStyleText}>
             { user.id } - { user.user } - { user.Text }
         </Text>
     </View>
     )
});

我想只显示Reducer中的2个对象。所以第一个(id: '1')和第二个(id: '2')但不是基于id，只有前一个2.然后有Button onPress将加载更多2个值。如果还有更多值，按钮将显示，否则不显示。暂时不担心Button的显示。我想知道如何在reducer中渲染限制值。

非常感谢。

Answer 1

您必须使用slice方法。

slice()方法将数组的部分的shallow副本返回到从开始中选择的new数组对象结束（不包括在内）。原始数组不会被修改。

let size=2;
const renData = Object.keys(this.props.users).slice(0,size).map((key, idx) => {
let user = this.props.users[key]
 return(
     <View key={idx} style={styles.myStyle}>
         <Text style={styles.myStyleText}>
             { user.id } - { user.user } - { user.Text }
         </Text>
     </View>
     )
});

您可以在object的{{1}}中声明state：

component

并使用this.state={ data:{ count:count, dataArray:array } }方法以setState值。

bind

Answer 2

同样的场景你对纯JS的期望是什么。使用与@MayankShukla相同的Array#slice逻辑。

＆＃13;

var count = 0;
const data = [1,2,3,4,5,6,7,8,9,10,11];
function renderMore(){
  count+= 2;
  if(count > data.length) {
    count = data.length;
    document.getElementById("button").disabled = true;
  }
  let renData = data.slice(0,count);
  console.log(renData)
}

＆＃13;

<button id="button" onclick="renderMore()">Show more</button>

＆＃13;

希望这会有所帮助：）

Answer 3

在组件内部维护一个状态变量，它将保存您要渲染的项目数，该变量的初始值将为2.

然后使用#array.slice获取数据的一部分，并在其上运行#array.map，要加载更多项目，请更新该变量的计数。

像这样写：

const renData = Object.keys(this.props.users).slice(0, 2).map((key, idx) => {
     ......
}

注意：代替两个使用该变量。

限制来自Reducer的结果

3 个答案: