javascript - 如何从 Redux 字段一次呈现 2 个字段

标签 javascript reactjs redux react-redux react-redux-form

我一次从 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);
    }

返回:enter image description here

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

最佳答案

您可以使用 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
  })
}

关于javascript - 如何从 Redux 字段一次呈现 2 个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58976107/

相关文章:

javascript - Bootstrap 可搜索下拉菜单

reactjs - 如何使用 React Router v6 将 useParams 传递到 React 中的 mapStateToProps?

javascript - 使用 React 和 Redux 对来自 API 的特定于日期的结果进行分页

javascript - ReactJS:如何防止 array.push 中的重复值?

javascript - 使用 takeUntil 在 Redux-observable 中取消异步请求的预期行为是什么

javascript - CORS 请求后,AJAX 无法在浏览器上设置 Cookie。 Set-Cookie header 仅存在于 FireFox 中,而不存在于 Chrome 中

javascript 返回错误的第一个日期和最后一个日期

javascript - 将事件类添加到基于 URL javascript 的导航菜单 - 仅在发出警报时有效

javascript - reactjs 如何使用对象设置样式而不是使用内联样式?

javascript - 提升状态向上 : Communicating from child component and upward