javascript - 如何从 Redux 字段一次渲染 2 个字段

Question

我一次从 api 加载数据 5 条记录，我想第一次渲染 2 条记录，点击加载后又多了 2 条记录。Redux 字段数组

<FieldArray name="facilityData"
                        component={this.getFacilities}
                    />

返回函数它包括正在运行和渲染 redux 字段的 map 函数

getFacilities = ({ fields, meta: { error, submitFailed } }) => {

return fields.map((facility, index) => {
return <div>{index}</div>
})
}

我已经实现了 fields.slice() 但是这个函数在 Redux 表单字段中不起作用

我努力了

getFacilities = ({ fields, meta: { error, submitFailed } }) => {

        const setss = [...Array(fields)];
        console.log(setss);
    }

它回来了：

我想一次加载 2 条记录，如何使用 fields.map 函数添加中断。

标签： javascriptreactjsreduxreact-reduxreact-redux-form

Answer 1

您可以使用 map 函数中的索引来控制应显示多少字段。返回null不会渲染任何东西。不过，您需要自己处理增加fieldsToShow变量。

const fieldsToShow = 2; // could be pulled from state


getFacilities = ({ fields, meta: { error, submitFailed } }) => {
  return fields.map((facility, index) => {
    return index < Math.min(fieldsToShow, fields.length) ? <div>{/* Render the field */}</div> : null
  })
}