Question

在更新商店后，不会重新呈现JobList组件。更新是从下拉菜单中应用排序筛选器。我已经在控制台上记录了状态，并可以确认它正在更新并返回正确的数据。我看不到任何明显的问题，例如直接更新状态。

Joblist.js：

const JobList = (props) => (

<div className="content-container">
{console.log(props)}
    <div className="table">
        <div className="tr th">
            <div className="list-header">Job Number</div>
            <div className="list-header">Brand</div>
            <div className="list-header">Item</div>
            <div className="list-item__lastTitle ">Status</div>
        </div>
    </div>
    <div className="list-body">

        {props.jobs.map((job) => {
        return <JobListItem key={job.id} {...job}/>
        })}
    </div>  
    </div>
);

const mapStateToProps = (state) => {
    return {
        jobs: jobsSorted(state.jobs, state.filters)
    };
};

export default connect(mapStateToProps)(JobList);

JobSortFilters.js：

const JobSortFilters = (props) => (
<div>
    <select 
        value={props.filters.sortBy}
        onChange={(e) => {
            if (e.target.value === 'brand') {
                props.dispatch(sortByBrand());
            }
            else if (e.target.value === 'status') {
                props.dispatch(sortByStatus());
            }
            else if (e.target.value === 'itemName') {
                props.dispatch(sortByItem());
            }                
        }}
    >
        <option value="brand">Brand</option>
        <option value="status">Status</option>
        <option value="itemName">Item</option>
    </select>
</div>
);

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

export default connect(mapStateToProps)(JobSortFilters);

Filters.js（操作）：

export const sortByBrand = () => ({
type: 'SORT_BY_BRAND',
});
export const sortByStatus = () => ({
type: 'SORT_BY_STATUS',
});
export const sortByItem = () => ({
type: 'SORT_BY_ITEM',
});

Filters.js（缩减程序）：

const filtersReducerDefaultState = {
sortBy: 'brand'
};

export default (state = filtersReducerDefaultState, action) => {
    switch (action.type) {
        case 'SORT_BY_BRAND':
            return {
            ...state,
            sortBy: 'brand'
        };
    case 'SORT_BY_STATUS':
        return {
            ...state,
            sortBy: 'status'

        };
    case 'SORT_BY_ITEM':
        return {
            ...state,
            sortBy: 'itemName'
        };
    default:
        return state;
 }
};

选择器：

export default (jobs, { sortBy }) => {

return jobs.sort((a, b) => {
    if (sortBy === 'brand') {            
        return a.brand < b.brand ? -1 : 1;
    }
    else if (sortBy === 'status') {            
        return a.status < b.status ? -1 : 1;
    }
    else if (sortBy === 'itemName') {            
        return a.itemName < b.itemName ? -1 : 1;
    }
});
};

React JS-Redux状态更新后组件未呈现

0 个答案: