通过 prop 传递给子组件的 Function 在调用时不是 function

Question

当我通过其道具将 function 从父组件传递到子组件并调用 function 时出现问题，我收到一条错误消息，提示“您的 ZC1C425268E68385D1AB5074C17A94F 不是函数”

这是子组件：

const AppointmentItem = (props) => {
  const { authRole, data, chosenItem } = props;

  ...

  <Button
    onClick={() => chosenItem(card.cardId, 'rejected')} // error is not function  
  >

  ...
}

这是父组件：

const chosenItem = (id, type) => {
  setSelectedItem(id);
  if (type === 'accepted') operation(id, 'accepted');
  if (type === 'rejected') setRejectForm(true);
};

...

<AppointmentItem
  // eslint-disable-next-line
  key={index}
  data={card}
  chosenItem={chosenItem}
  authRole={authRole}
  operation={operation}
/>

在子组件中调用 selectedItem 时，我收到一条错误消息， chosenItem不是chosenItem 。

Answer 1

代码看起来不错，问题出在setSelectedItem 、 operation或setRejectForm 。

我建议你放一个debugger; 语句或在 selectedItem 中的常规断点并检查我上面提到的每个函数，看看哪个是未定义的。

如果您需要更多帮助/详细信息，请将可重现的示例上传到代码沙箱

Answer 2

您应该使用 proptypes 检查器检查 function 是否传递为 function 并且您应该将其设置为“proptypes.function”，然后使用 proptypes.defaultProps 并将其传递给 Z37A6259CC0C1DAE29Z98:8:8897

classname.defaultProps:{myFunction:null}

className.propType:{

myfunction:proptype.function
}

答案是 remove isrequired 并使用 defalutProps