Question

我的目标是使用redux对一组对象进行排序因此，我的react-app开始从服务器获取对象，更新redux存储并呈现项目列表然后，单击一个按钮我的reducer使用相同的数组更新商店但排序并将新状态返回到我的容器组件，该容器组件将新的props传递给“list-Component”，导致重新呈现此组件。 /> 现在我希望重新渲染的项目列表将被排序，但列表与之前相同...

为什么？有什么想法吗？

这里是代码：

App.js （容器组件）

class App extends Component {

    componentWillMount() {
        this.props.sortBy(GET_LIST);
    }

    render() {

        return (
            <div className="App">
                <Nav sortByDate={() => {
                    this.props.sortBy(SORT_BY_DATE)
                }} sortByLikes={() => {
                    this.props.sortBy(SORT_BY_LIKES)
                }}/>
                <Items comments={this.props.comments}/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        comments: state.comments
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        sortBy: (action) => {
            dispatch(sortBy(action));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

CommentList.js

class ListItems extends Component {
    constructor(props) {
        super(props);
    }


    getComments() {
        return (this.props.comments.map(function (object) {
            console.log(JSON.stringify(object));
            return <Item numLikes={object.num_like} id={object.id} comment={object.comment} date={object.date}
                         sender={object.sender}/>
        }));
    }


    render() {
        return (
            <Container>
                <Row>
                    <Col lg={2} md={1} xs={0}/>
                    <Col lg={8} md={10} xs={12}>
                        {console.log("RENDER")}
                        {console.log(JSON.stringify(this.props.comments))}
                        {this.getComments()}
                    </Col>
                    <Col lg={2} md={16} xs={0}/>
                </Row>
            </Container>
        );
    }
}

export default ListItems;

Reducer.js

const listReducer = (state = {
    comments: []
}, action) => {
    function toDate(dateStr) {
        const [day, month, year] = dateStr.split("/") return new Date(year, month - 1, day)
    }

    function commentSortedByDate(comments) {
        comments.sort(function(a, b) {
            return toDate(b.date) - toDate(a.date);
        }) return [...comments];
    }

    function commentSortedByLikes(comments) {
        comments.sort(function(a, b) {
            return parseInt(b.num_like) - parseInt(a.num_like);
        }) return [...comments];
    }
    switch (action.type) {
        case SORT_BY_DATE:
            console.log("sort by date");
            state = {...state, comments: commentSortedByDate(state.comments)
            }
            break;
        case SORT_BY_LIKES:
            console.log("sort by likes");
            state = {...state, comments: commentSortedByLikes(state.comments)
            }
            break;
        case GET_LIST:
            state = {...state, comments: action.payload
            }
            break;
    }
    return state;
};
export default listReducer;

Answer 1

你正在改变国家...... 而不是

UPDATE Messages SET account = (
    SELECT json_group_array(value) FROM (
        SELECT json_each.value
        FROM Messages, json_each(Messages.account)
        WHERE Messages.id = 123456789
        UNION ALL SELECT 'new_account'
    ) GROUP BY ''
) WHERE id = 123456789;

你应该写

state = {...state, comments: commentSortedByDate(state.comments)

列出更改但React重新呈现相同的更改

1 个答案: