Блог

Главная - Вопросы по программированию - Получение ошибки при передаче функции дочернему компоненту

Получение ошибки при передаче функции дочернему компоненту

#javascript #reactjs #components #react-props

#javascript #reactjs #Компоненты #реагировать-реквизит

Вопрос:

Я получаю эту ошибку, когда пытаюсь передать свою функцию дочернему компоненту: TypeError: props.replaceVariables is not a function Я что-то упускаю? Насколько я знаю, я передаю свою функцию правильно. Поэтому я не могу решить, находится ли проблема внутри Player.js или MultipleChoiceType.js . Мой родительский компонент:

 class Player extends React.Component {

    constructor(props) {
        super(props);
        this.replaceVariables = this.replaceVariables.bind(this);
    }

    state = {
        scope: {},
        variables: this.props.question.data.variables,
        ...
    }

    _renderAnswerInputs(part, partIndex) {
        switch (part.questionType) {
          case Constants.PartMultipleChoiseQuestionType:
            return part.solutions.map((solution, solutionIndex) => {
              return <MultipleChoiceType
                replaceVariables={this.replaceVariables}
                choices={solution[0].choices}
                playerAnswer={this.state.myAnswerPartData?.answers[0]}
                selectedChoiceChanged={(choiceIndex) => this.onChangedMyMultipleChoise(solution[0].choices[choiceIndex], solutionIndex)}
                edit={false} />
            })
        }
    }

    replaceVariables(q) {
        for (var key in this.state.scope) {
          q = this.replaceAll(q, '<span class="mord">'   key   '</span>', '<span class="mord mathdefault">'   this.state.scope[key]   '</span>');
          q = this.replaceAll(q, '<span class="mord mtight">'   key   '</span>', '<span class="mord mathdefault">'   this.state.scope[key]   '</span>');
        };
        return q;
    }
}
...

Мой дочерний компонент:

 function MultipleChoiceType(props) {
    const dispatch = useDispatch()
    return (
        <div>
            {
                props.choices?.map((choice, cIndex) => (
                    <div style={{ display: 'flex', padding: 5 }} key={cIndex}>
                        <div dangerouslySetInnerHTML={{ __html: props.replaceVariables(choice.value) }} />
                    </div>
                ))
            }
        </div>
    )
}
...

Комментарии:

1. _renderAnswerInputs также может потребоваться привязка к this в конструкторе. Не могу сказать наверняка, но для проверки вы можете войти в консоль this.replaceVariables внутри _renderAnswerInputs функции. Если это не определено, это ваша проблема.

2. @BrianThompson Я просто ограничил это как this._renderAnswerInputs = this._renderAnswerInputs.bind(this) , но все еще получаю ту же ошибку

3. Хорошо, вы регистрировали функцию в консоли внутри этого метода? Это сузило бы ваш поиск отладки, чтобы узнать, определено ли оно там или нет (или как-то не определено как функция)

4. @BrianThompson да, вот что отображалось в журнале: function () { [native code] } . Я думаю, что проблема каким-то образом связана с тем, что MultipleChoiceType является функцией, а не классом…

5. Сомнительно, что это связано с функцией против класса. Я не могу найти здесь ничего явно неправильного. Есть ли какой-либо другой соответствующий код? Не могли бы вы привести пример, пригодный для выполнения?

Ответ №1:

Я попытался повторить то же поведение, и оно работает отлично.

https://stackblitz.com/edit/react-fx2gso?file=src/App.js

Должно быть, причиной этой проблемы было что-то другое.

Ответ №2:

Используйте => функции со стрелками, тогда вам не нужно привязывать функцию в конструкторе Попробуйте привязать значение к функции

Редактировать => попробуйте использовать функции со стрелками вместо старого синтаксиса

 <MultipleChoiceType
            replaceVariables={value=>this.replaceVariables(value)}
            choices={solution[0].choices}
            playerAnswer={this.state.myAnswerPartData?.answers[0]}
            selectedChoiceChanged={(choiceIndex) => 
            this.onChangedMyMultipleChoise(solution[0].choices[choiceIndex], 
           solutionIndex)}
            edit={false} />