使用 redux/ 钩子从列表中删除项目不起作用答案

【问题标题】：Remove item from list with redux/ hooks not working使用 redux/ 钩子从列表中删除项目不起作用
【发布时间】：2021-04-10 18:14:16
【问题描述】：

我正在使用 redux/react/hooks 制作一个监视列表组件。组件分为 3 部分（添加到列表的表单、映射证券的容器和显示每个项目的安全性）

到目前为止，我已经能够通过在表单组件中调度 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>
    );

}

【问题讨论】：

onClick={removeTask} 不带括号。这只会在单击按钮时调用该函数 - 现在您在每次渲染时都调用它。
在没有括号的情况下尝试过，但没有运气。我添加了它们，看看它是否可以解决它。
您的按钮onClick 事件处理程序似乎会导致无限渲染，因为它会在渲染时立即被调用。它应该是onClick={()=>removeTask()} 的形式。您似乎还希望将要删除的监视列表项的索引传递给 deleteStock 操作创建者，而不是传递 taskName

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

通过更正 cmets 中列出的问题并修复我的 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>
    );

}

【讨论】：