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

Question

我想重新呈现切片数据并在表单字段中显示，我正在使用 array.slice 切片数据块。

构造函数绑定handleclick函数

    constructor() {
        super();
        this.state = {
            currentPage: 1,
            todosPerPage: 3,
        };
        this.handleClick = this.handleClick.bind(this);
    }

handleClick = (event) => {
        this.setState({
            currentPage: Number(event.target.id)
        }, () => {
                this.forceUpdate();
        });  
    }

内部渲染函数

 const pageNumbers = [];
        for (let i = 1; i <= Math.ceil(this.props.facilityDataInputs.length / this.state.todosPerPage); i++) {
            pageNumbers.push(i);
        }

        const renderPageNumbers = pageNumbers.map(number => {
            return (
                <li key={number}>
                     <div style={{ display: 'inline-flex', cursor : 'pointer' }}>
                    <input type="button"
                                name="facilityId"
                                value={number}
                                id={number}
                                onClick={this.handleClick}
                            />
                        </div>
                </li>
            );
        });

Redux 表单函数

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

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

Answer 1

试试下面的代码。

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

Answer 2

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

中传递任何更新道具

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

在 fieldsArray redux 表单中传递 props 后识别状态值的变化并自动重新渲染组件

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

How to re-render the Redux forms while using pagination

javascript

reactjs

react-native

redux

react-redux

构造函数绑定handleclick函数

内部渲染函数

Redux 表单函数

渲染函数