類型錯誤：調度不是嵌套組件中的函數

Question

嘗試從嵌套組件內的按鈕調度刪除事件。

我像這樣將調度作為屬性從 App.js 傳遞給組件

render() {
        const {files, isFetching, dispatch} = this.props;
        const isEmpty = files.length === 0;
        return (
            <div>
                <h1>Uploadr</h1>
                {isEmpty
                    ? (isFetching ? <h2>Loading...</h2> : <h2>No files.</h2>)
                    : <div style={{opacity: isFetching ? 0.5 : 1}}>
                        <Files files={files} dispatch={dispatch}/>
                    </div>
                }
            </div>
        )
    }

在嵌套組件中，我從onclick屬性調用 dispatch

const Files = ({files, dispatch}) => (
    <ul>
        {files.map((file, i) =>
            <li key={i}>{file.name}
                <button onClick={dispatch(deleteFileById(file.id))}>Delete</button>
            </li>
        )}
    </ul>
);

Files.propTypes = {
    files: PropTypes.array.isRequired,
    dispatch: PropTypes.func.isRequired
};

export default Files

這是被調用的方法

export const deleteFileById = (dispatch, fileId) => {
    dispatch(deleteFile);
    return fetch(`/api/files/${fileId}`, {method : 'delete'})
        .then(dispatch(fetchFiles(dispatch)))
};

我嘗試做this.props.dispatch但這也不起作用。

有任何想法嗎？

Answer 1

似乎您的方法deleteFileById期望調度程序作為參數。 以下調整對您有用嗎？

<button onClick={() => (deleteFileById(dispatch, file.id))}>Delete</button>