使用 redux/ 鈎子從列表中刪除項目不起作用

Question

我正在使用 redux/react/hooks 制作一個監視列表組件。 組件分為 3 件（表格添加到列表，容器到 map 超過證券，以及顯示每個項目的安全性）

到目前為止，我已經能夠通過在表單組件中調度addStock來添加值。 我試圖在deleteStock的安全組件中做同樣的事情，但它不工作/重新加載頁面。

減速器：

const stockSelector = (state = STOCK_STATE, action) => {
    switch (action.type) {
        case STOCK_SELECTED:
            return action.payload;
        case FETCH_STOCK_LIST:
            return { ...state, watchlist: action.payload.select, title: action.payload.name, loading: false};
        case STOCK_LIST_LOADING:
            return {...state, loading: true}
        case ADD_STOCK:
            return { ...state, watchlist: [action.payload, ...state.watchlist] };
        case DELETE_STOCK:
            return { 
                ...state,
                watchlist: [
                    ...state.watchlist.slice(0, action.payload),
                    ...state.watchlist.slice(action.payload + 1)
                ],
             };
        default:
            return state;
    }

行動

export const deleteStock = (payload) => ({
    type: DELETE_STOCK,
    payload,
});

監視列表組件

const Watchlist = ({selected, watchlists, number}) => {
    const dispatch = useDispatch();
    const [taskList, setTaskList] = useState(['AAPL', 'MSFT', 'AMZN'])
    const [list, setList] = useState(selected)
    const [allList, setAllList] = useState(watchlists)
    const [selectNumber, setSelectNumber] = useState(number)

    const selectWatchlist = async () => {
        setList(selected)
        setSelectNumber(number)
    }

    useEffect(() => {
        selectWatchlist()
            .then(dispatch(fetchStockList(selectNumber)))
    }, []);

    return (
        <React.Fragment>
        <Col className="watchlist-master-col">
            <Row className="watchlist-form-row">
                <Col>
                    <AddWatchlistForm className="watchlist-form" />
                </Col>
            </Row>
            <Row className="watchlist-list-row">
                <ListSecurityContainer
                    list={taskList}
                    className="watchlist-list"
                    number={number}
                />
            </Row>
            <Row>
                <Modal className='modalOne' />
            </Row>
        </Col>
        <Modal />
    </React.Fragment>
    )
    
}

const mapStateToProps = (state) => {
    console.log(state)
    return {
        selected: state.Watchlist.stock.title,
        watchlists: state.Watchlist.watchlist.watchlist,
        watchlist: state.Watchlist.stock.watchlist,
        number: state.Watchlist.watchlist.number,
        

    }
}

容器

const ListSecurityContainer = ({loading, stocks}) => {
    const dispatch = useDispatch();

    const handleCloseTask = (id) => {
        dispatch(deleteStock(id))
    }

    if (loading === false) {
        return (
            <React.Fragment>
                <Col>
                    {stocks.map((value, index) => (
                        <Security
                            key={stocks[index]}
                            id={index}
                            {...value}
                            name={value}
                            // onClose={handleCloseTask}
                            className="security-elem"
                        />
                    ))}
                </Col>
            </React.Fragment>
        );
    }
    return <div>Loading...</div>


}

const mapStateToProps = (state) => {
    console.log(state.Watchlist.stock.watchlist)
    return { 
        stocks: state.Watchlist.stock.watchlist,
        loading: state.Watchlist.stock.loading
    }
}

安全

const Security = (value) => {
    const dispatch = useDispatch();
    const [taskName, setTaskName] =useState(value.name)

    const removeTask = () => {
        dispatch(deleteStock(taskName))
    }

    return (
        <div className="list-group-item">
            {value.name}
            <button onClick={removeTask()} style={{ float: 'right' }}>
                <i className="glyphicon glyphicon-remove"></i>
            </button>
        </div>
    );

}

Answer 1

通過更正評論中列出的問題並修復我的constants.js文件中的類型來解決此問題。

const Security = ({index, name}) => {
    const dispatch = useDispatch();
    const [taskName, setTaskName] =useState(name)

    const removeTask = (e) => {
        e.stopPropagation()
        dispatch(removeStock(index))
    }    

    return (
        <Row className="list-group-item">
            <div className="item-titles">
                {name}
            </div>
            <button onClick={() => dispatch(removeStock(index))} className="remove-item">
                <i className="glyphicon glyphicon-remove"></i>
            </button>
        </Row>
    );

}