Javascript 从列表中删除redux/hooks不起作用的项

我正在使用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-Watchlist=（{selected，Watchlist，number}）=>{
const dispatch=usedpatch（）；
const[taskList，setTaskList]=useState（['AAPL'，'MSFT'，'AMZN']）
const[list，setList]=useState（选定）
常量[allList，setAllList]=useState（监视列表）
常量[selectNumber，setSelectNumber]=useState（数字）
const selectWatchlist=async（）=>{
集合列表（选定）
设置选择编号（编号）
}
useffect（（）=>{
选择观察列表（）
.然后（发送（获取库存列表（选择编号）））
}, []);
返回(
)
}
常量mapStateToProps=（状态）=>{
console.log（状态）
返回{
选中：state.Watchlist.stock.title，
观察列表：state.Watchlist.Watchlist.Watchlist，
观察列表：state.watchlist.stock.watchlist，
编号：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-ListSecurityContainer=（{loading，stocks}）=>{
const dispatch=usedpatch（）；
const handleCloseTask=（id）=>{
派送（删除库存（id））
}
如果（加载===false）{
返回(
{stocks.map（（值、指数）=>(
))}
);
}
返回加载。。。
}
常量mapStateToProps=（状态）=>{
log（state.Watchlist.stock.Watchlist）
返回{
股票：state.Watchlist.stock.Watchlist，
加载：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>
    );

}

const Security=（值）=>{
const dispatch=usedpatch（）；
const[taskName，setTaskName]=useState（value.name）
常量removeTask=（）=>{
调度（删除库存（任务名称））
}
返回(
{value.name}
);
}

通过更正注释中列出的问题并修复我在

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>
    );

}

const Security=（{index，name}）=>{
const dispatch=usedpatch（）；
const[taskName，setTaskName]=useState（name）
常量removeTask=（e）=>{
e、 停止传播（）
调度（移除库存（索引））
}    
返回(
{name}
调度（removeStock（index））}className=“删除项目”>
);
}

onClick={removeTask}

不带括号。这将仅在单击按钮时调用该函数-现在您正在每次渲染时调用它。尝试了不带括号的函数，但没有成功。我添加它们是为了看看它是否可以修复。您的按钮

onClick

事件处理程序似乎会导致无限渲染，因为它在渲染时会立即被调用。它的形式应该是

onClick={（）=>removeTask（）}

。您似乎还希望将要删除的观察列表项的索引传递给

deleteStock

操作创建者，而不是传递

taskName