React中将onClick内联函数提取为外部函数后调用API报404如何解决？

问题原因 #

你改写代码后没有给事件处理函数传入正确的item.url参数：
React的DOM事件回调默认会把**事件对象（MouseEvent）**作为第一个参数传入处理函数，你现在直接将handleGetInfo绑定给onClick，实际传入newsAction的参数是事件对象而非预期的接口地址，最终请求路径错误触发404。

修复方案 #

方案1：绑定调用时传参（最常用） #

在onClick处用箭头函数包裹，手动传入对应条目的url参数：

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

方案2：柯里化改造处理函数 #

将handleGetInfo改造成高阶函数，接收url后返回真正的事件处理函数：

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

内容的提问来源于stack exchange，提问作者Serralvaro