React: props.<function name> 不是函数

Question

我在调用我的函数 addQuestion 时出错，我得到了错误：

props.addQuestion is not a function

我有两个组件，CampaignMng 包含 QuestionsList 个组件。

我的CampaignMng:

export default function CampaignMng(props: ICampaignMngStateProps & 
             ICampaignMngDispatchProps & ICampaignQuestionsProps) {
...

const addQuestion = function(question: Question) {
  console.log(question);
}

return (
     ...

      <TabPanel value={value} index={1}>
        <QuestionsList 
          questions={props.questions}
          campaignQuestions={props.campaign!.questions!}
          addQuestion={props.addQuestion}
          deleteQuestion={props.deleteQuestion}
        />
      </TabPanel>
  );
}

我的QuestionsList组件

export default function QuestionsList(props: IQuestionsStateProps & 
ICampaignQuestionsProps) {
  const classes = useStyles();

  const onAddQuestion = (question: Question) => {
    return (event: React.MouseEvent) => {
      props.addQuestion(question);
      event.preventDefault();
    }
  }

  ...

  {questions.map(question => (
  <TableRow key={question.id}>
    <TableCell component="th" scope="row">
      {question.title}
    </TableCell>
    <TableCell align="right">{question.language}</TableCell>
    <TableCell align="right">{question.duration}</TableCell>
    <TableCell align="right">{question.type}</TableCell>
    <TableCell align="right">
      <IconButton onClick={ 
             mode == 1 ? () => onAddQuestion(question) :
                               onDeleteQuestion(question)}>
        {mode == 1 ? <AddIcon />:<DeleteIcon />}
      </IconButton>
    </TableCell>
  </TableRow>
))}
...

);

我有两个接口：IQuestionsStateProps 和 ICampaignQuestionsProps

export interface ICampaignQuestionsProps {
  addQuestion: (question: Question) => void; 
  deleteQuestion: (question: Question) => void;
}

export interface IQuestionsStateProps {
  questions: Question[];
  campaignQuestions: Question[];
}

Answer 1

在 CampaignMng 中，您似乎在那里定义了 addQuestion 函数，但随后您尝试使用 [=15= 将函数从 CampaignMng props 转发到 QuestionsList ].尝试只传递函数：

addQuestion={addQuestion}

React: props.<function name> 不是函数

React: props.<function name> is not a function

javascript

reactjs

typescript

react-dom