Question

问题如下：

这就是我的redux鸭子中的东西

export const myInit = () => (dispatch, getState) => {
   db.ref(`/parts/`).on(
       'value',
        (snapshot) => 
(dispatch(getParts(mapObjectToArray(snapshot.val())))))
}

export const addAmount = (objecter) => (dispatch, getState) => {
let findKey = getState().partsState.parts.find(x => {
    if (x.part === objecter)
        return x.key
})
let xAmount

getState().partsState.parts.find(x => {
    if (x.part === objecter)
        return xAmount = x.amount
})
db.ref(`/parts/${findKey.key}/amount`).set(xAmount + 1)

}

myInit（）在商店中被调用一次，因此零件将以状态保存。

我在表格的组件中显示这些零件。在每个tr中，都有一个零件名称，数量和一个用于更改零件数量的按钮。单击按钮后，给定零件的数量将更改。除非在使用输入值状态过滤零件时调用了数量更改，否则一切似乎都可以正常工作。

当列表被过滤并且零件的数量改变时，整个组件将重新呈现。搜索字段被清除，列表扩展。我不知道该怎么办。请告诉我我在想什么。

组件：

class ListOfParts extends Component {
state = {
    basicSearchInput: '',
    ITEMS_PER_PAGE: 10,
    currentPage: 0,
    parts: []
}

setStateForSearch(event) {
    this.setState({basicSearchInput: event.target.value})
}


render() {
    let myArrayForState = ['actuator', 'back_plate']

    let arrayForHeadings = ['Actuator', 'Back plate'
    ]

    let parts = this.props.parts;
    const filter = parts
        .filter(part => {
                return (part.part.toLowerCase().includes(this.state.basicSearchInput.toLowerCase()))
                    || (part.group.toLowerCase().includes(this.state.basicSearchInput.toLowerCase()))
            }
        )

    const numberOfParts = filter && filter.length

    return (
        <div>
           <TextField
               type={"search"}
               value={this.state.basicSearchInput}
                onChange={event => this.setStateForSearch(event)}
           />
           <RaisedButton
                onClick={this.handleOpen}
           >
           add
           </RaisedButton>

            <Row>
                <table>
                    <tbody>
                    {filter && filter.length ?
                        filter.filter((el, i) => {
                            return (i >= this.state.ITEMS_PER_PAGE * this.state.currentPage
                                &&
                                i < this.state.ITEMS_PER_PAGE * (this.state.currentPage + 1))
                        }).map((partInStateArray, index) =>
                             <tr id={`${partInStateArray.part}`}
                                 key={`${partInStateArray.part}${this.props.index}`}>
                                 <td>{this.arrayForHeadings[this.myArrayForState.indexOf(partInStateArray.group)]} {partInStateArray.part}</td>
                                 <td>{partInStateArray.amount}</td>
                                 <td>
                                     <button onClick={this.add}>+</button>
                                 </td>
                              </tr>)
                        )
                        : 'loading'
                    }
                    </tbody>

                </table>
            </Row>
            <div style={{textAlign: 'center'}}>
                <Pagination
                    total={Math.ceil(numberOfParts / this.state.ITEMS_PER_PAGE)}
                    current={this.state.currentPage + 1}
                    display={10}
                    onChange={newPage => this.setState({currentPage: newPage - 1})}
                />
            </div>
        </div>
    )
}
}


const mapStateToProps = state => ({
parts: state.partsState.parts,
})

const mapDispatchToProps = dispatch => ({
addAmount: (objectToAdd) => dispatch(addAmount(objectToAdd)),
})

export default connect(
mapStateToProps,
mapDispatchToProps
)(ListOfParts)

redux不必要地重新呈现整个组件

0 个答案: