React 在事件之外的函数中使用参数

Question

我正在尝试从 onClick 事件中取出一个函数，但我不知道为什么它不起作用。

此代码有效

<ul className="list-group mt-3">
    {news.map((item) => (
        <li 
            key={item.name} 
            className="list-group-item text-capitalize"
        > 
            {item.name}
            <button 
                className="btn btn-dark btn-sm float-right"
                onClick={ () => dispatch( newsAction(item.url) ) }
            >
                Info
            </button>
        </li>
    ))}
</ul>

但我正在尝试使用此方法清理代码

const handleGetInfo = (url) => {
    dispatch( newsAction(url) )
}

return (
    <ul className="list-group mt-3">
        {news.map((item) => (
            <li 
                key={item.name} 
                className="list-group-item text-capitalize"
            > 
                {item.name}
                <button 
                    className="btn btn-dark btn-sm float-right"
                    onClick={ handleGetInfo }
                >
                    Info
                </button>
            </li>
        ))}
    </ul>
)

调用 API

时抛出 404 错误

Answer 1

const handleGetInfo = (url) => () => {
    dispatch( newsAction(url) )
}

return (
    <ul className="list-group mt-3">
        {news.map((item) => (
            <li 
                key={item.name} 
                className="list-group-item text-capitalize"
            > 
                {item.name}
                <button 
                    className="btn btn-dark btn-sm float-right"
                    onClick={ handleGetInfo(item.url) }
                >
                    Info
                </button>
            </li>
        ))}
    </ul>
)

React 在事件之外的函数中使用参数

React Use param in function outside of event

javascript

reactjs

redux