限制 Reducer 的结果答案

【问题标题】：Limit results from Reducer限制 Reducer 的结果
【发布时间】：2018-02-20 16:32:11
【问题描述】：

所以我的 Reducer 是：

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 和 prop 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 个值。如果还有更多值，按钮将显示，否则不显示。现在不担心按钮的显示。我想知道如何在减速器的渲染值中应用限制。

非常感谢。

【问题讨论】：

有一个变量来保存您要渲染的项目数，并像这样写Object.keys(this.props.users).slice(0,2).map(......，代替 2 使用该变量。

标签： javascript reactjs react-native ecmascript-6 react-redux

【解决方案1】：

你必须使用slice方法。

slice() 方法将数组的部分的 shallow 副本返回到从 begin 到 endnew 数组对象中/strong>（不包括结尾）。原数组不会被修改。

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

您可以在component 的state 中声明一个object：

this.state={
    data:{
       count:count,
       dataArray:array
    }
}

并使用setState 方法来获取bind 值。

this.setState({
  data: {
        count:newCount
        dataArray: newArray
       }
});

【讨论】：

我可以将React State 与Reducers 一起使用吗？减速机来自Redux减速机。测试代码。

【解决方案2】：

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

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

这样写：

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

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

【讨论】：

说var toShow = 2，等等按钮onPress更新toShow到4并再次渲染renData？
不，您需要将其设为状态变量，以便该变量的任何更改都会重新渲染组件。
@Somename，看看我的回答。
@MayankShukla，是的，他应该使用state 来更新和绑定new 值。

【解决方案3】：

与您对纯 JS 的期望相同的场景。使用与@MayankShukla 所说的相同的Array#slice 逻辑。

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

&lt;button id="button" onclick="renderMore()"&gt;Show more&lt;/button&gt;

希望这会有所帮助:)

【讨论】：