如何在使用分頁時重新渲染 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 后識別狀態值的變化並自動重新渲染組件