点击Save Palette按钮报props.savePalette is not a function错误如何解决

报错原因 #

• NewPaletteForm函数组件定义时没有接收props参数，无法访问父组件App传递的savePalette方法和路由相关属性
• handleSubmit是按钮点击事件的回调，函数第一个入参默认是点击事件对象event，你将这个参数命名为props，尝试从事件对象上获取savePalette方法自然不存在，触发类型错误

解决方案 #

1. 给NewPaletteForm组件添加props入参 #

修改组件定义代码，接收父组件传递的所有属性：

// 原代码：function NewPaletteForm() {
function NewPaletteForm(props) {

如果习惯解构写法可以直接提取需要的属性，代码更简洁：

function NewPaletteForm({ savePalette, history }) {

2. 修正handleSubmit函数的参数引用 #

移除handleSubmit的props参数，直接引用组件层级的props对象：

// 原代码：function handleSubmit(props) {
function handleSubmit() {
    const newPalette = {
        paletteName: 'Test Palette',
        colors: colors
    }
    props.savePalette(newPalette);
    props.history.push('/');
}

如果使用了解构props的写法，直接调用解构出来的变量即可：

function handleSubmit() {
    const newPalette = {
        paletteName: 'Test Palette',
        colors: colors
    }
    savePalette(newPalette);
    history.push('/');
}

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