Question

我在调用函数addQuestion时遇到错误，并且得到了错误：

props.addQuestion不是函数

我有两个组件，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函数，但是随后您尝试使用QuestionsList将函数从CampaignMng道具转发到addQuestion={props.addQuestion}。尝试仅通过以下方式传递函数：

addQuestion={addQuestion}

反应：props。<函数名称>不是函数

1 个答案: