Javascript 如何在使用分页时重新呈现Redux表单

我想重新渲染切片数据并在表单字段中显示，我正在使用array.slice作为数据的切片块

构造函数函数绑定handleclick函数 内部渲染函数

const pageNumbers=[]；
for（设i=1；i{
返回(


);
});

Redux形式函数

facilityList=（{fields，meta:{error，submitFailed}}）=>{
const{currentPage，todosPerPage}=this.state；
//显示当前TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
让fetchFields=fields.getAll（）；
让displayFetchedFields=fetchFields.slice（indexOfFirstTodo，indexOfLastTodo）；
如果（displayFetchedFields）{
返回displayFetchedFields.map（（设施、索引）=>{
返回(

身份证件：
裁判：

)
})
}
}

渲染函数

我可以获取切片数据，但无法重新呈现表单。

请尝试下面的代码

facilityList = ({ fields, meta: { error, submitFailed } }) => {
            const { currentPage, todosPerPage } = this.state;

            // Logic for displaying current todos
            const indexOfLastTodo = currentPage * todosPerPage;
            const indexOfFirstTodo = indexOfLastTodo - todosPerPage;

    let fetchFields = fields.getAll();
            let displayFetchedFields = fetchFields.slice(indexOfFirstTodo, indexOfLastTodo);
            if (displayFetchedFields) {
                return displayFetchedFields.map((facility, index) => {
                    return (
                        <li key={indexOfFirstTodo+index} style={{ margin: '10px 0', color: '#071F5D' }}>
                            <div style={{ display: 'inline-flex' }}>
                                ID:
                        <Field
                                    name={`facilityData[${indexOfFirstTodo+index}].facilityId`}
                                    component='input'
                                    value={this.props.facilityDataInputs[indexOfFirstTodo+index].facilityId}
                                />
                            </div>
                            <div style={{ display: 'inline-flex' }}>
                                Ref:
                        <Field
                                    name={`facilityData[${indexOfFirstTodo+index}].facilityRef`}
                                    component='input'
                                    value={this.props.facilityDataInputs[indexOfFirstTodo+index].facilityRef}
                                />
                            </div>
                        </li>
                    )
                })
            }
        }

facilityList=（{fields，meta:{error，submitFailed}}）=>{
const{currentPage，todosPerPage}=this.state；
//显示当前TODO的逻辑
const indexOfLastTodo=当前页面*到页面；
const indexOfFirstTodo=indexOfLastTodo-todosparterpage；
让fetchFields=fields.getAll（）；
让displayFetchedFields=fetchFields.slice（indexOfFirstTodo，indexOfLastTodo）；
如果（displayFetchedFields）{
返回displayFetchedFields.map（（设施、索引）=>{
返回(

身份证件：
裁判：

)
})
}
}

在切片数组时，FieldArray无法识别redux表单中的任何更改。 为此，您需要在fieldarray中传递任何更新道具

<fieldarray name ="facilitiData" update={this.state.currentPage} component ={this facilityList}>

---

在字段中传递道具后，Sarray redux表单识别状态值的更改，并自动重新渲染组件

您在哪里使用facilityList？你能分享那个代码吗？在渲染函数中。。我可以在控制台中获取切片数据。日志，但它不反映在渲染组件中尝试使用facility对象显示字段。您正在使用facilityData和props。facilityData使用索引输入。切片可以工作，但数据在同一索引上保持不变。还尝试使用比索引更独特的内容更新键。希望它能解决你的问题。你能在其中添加一些测试代码吗，我将感谢你是的。您可以尝试使用企业页面*currentPage+索引

facilityList = ({ fields, meta: { error, submitFailed } }) => {
        const { currentPage, todosPerPage } = this.state;

        // Logic for displaying current todos
        const indexOfLastTodo = currentPage * todosPerPage;
        const indexOfFirstTodo = indexOfLastTodo - todosPerPage;

let fetchFields = fields.getAll();
        let displayFetchedFields = fetchFields.slice(indexOfFirstTodo, indexOfLastTodo);
        if (displayFetchedFields) {
            return displayFetchedFields.map((facility, index) => {
                return (
                    <li key={index} style={{ margin: '10px 0', color: '#071F5D' }}>
                        <div style={{ display: 'inline-flex' }}>
                            ID:
                    <Field
                                name={`facilityData[${index}].facilityId`}
                                component='input'
                                value={this.props.facilityDataInputs[index].facilityId}
                            />
                        </div>
                        <div style={{ display: 'inline-flex' }}>
                            Ref:
                    <Field
                                name={`facilityData[${index}].facilityRef`}
                                component='input'
                                value={this.props.facilityDataInputs[index].facilityRef}
                            />
                        </div>
                    </li>
                )
            })
        }
    }

<fieldarray name ="facilitiData" component ={this facilityList}>

facilityList = ({ fields, meta: { error, submitFailed } }) => {
            const { currentPage, todosPerPage } = this.state;

            // Logic for displaying current todos
            const indexOfLastTodo = currentPage * todosPerPage;
            const indexOfFirstTodo = indexOfLastTodo - todosPerPage;

    let fetchFields = fields.getAll();
            let displayFetchedFields = fetchFields.slice(indexOfFirstTodo, indexOfLastTodo);
            if (displayFetchedFields) {
                return displayFetchedFields.map((facility, index) => {
                    return (
                        <li key={indexOfFirstTodo+index} style={{ margin: '10px 0', color: '#071F5D' }}>
                            <div style={{ display: 'inline-flex' }}>
                                ID:
                        <Field
                                    name={`facilityData[${indexOfFirstTodo+index}].facilityId`}
                                    component='input'
                                    value={this.props.facilityDataInputs[indexOfFirstTodo+index].facilityId}
                                />
                            </div>
                            <div style={{ display: 'inline-flex' }}>
                                Ref:
                        <Field
                                    name={`facilityData[${indexOfFirstTodo+index}].facilityRef`}
                                    component='input'
                                    value={this.props.facilityDataInputs[indexOfFirstTodo+index].facilityRef}
                                />
                            </div>
                        </li>
                    )
                })
            }
        }

<fieldarray name ="facilitiData" update={this.state.currentPage} component ={this facilityList}>