Передача функции для редактирования состояния из компонента класса в компонент на основе функции через неработающие реквизиты - PullRequest
Новая
       63

Передача функции для редактирования состояния из компонента класса в компонент на основе функции через неработающие реквизиты

0 голосов
/ 03 августа 2020

У меня есть интерфейс реакции, и большинство моих компонентов являются компонентами на основе классов, но так уж случилось, что один из компонентов внутри этих компонентов класса должен быть функциональным компонентом, поэтому в настоящее время у меня есть функциональный компонент с классом на основе компонент.

Внутри функционального компонента у меня есть кнопка, запускающая вызов выборки. После завершения этого вызова выборки я хочу, чтобы состояние компонента на основе класса (родительского) обновлялось.

Мой подход заключался в создании функции в компоненте на основе класса (называемом setSubscriptoin), который регулирует состояние компонент на основе класса, затем передайте эту функцию функциональному компоненту через props и вызовите функцию с помощью .then после вызова fetch.

Однако, похоже, что когда я передаю функцию через props, функциональный компонент даже не может обнаружить функцию, и я получаю эту ошибку: Uncaught (in promise) TypeError: e.setSubscription is not a function.

Вот важный код:

Компонент на основе класса: 

class OuterComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {subscription: {}}
    }

    setSubscription(subscription) {
        this.setState({subscription: subscription})
    }

    render() {
        return(
            <Elements>
                <FunctionComponent setSubscription={this.setSubscription.bind(this)}></FunctionComponent>
            </Elements>
        )
    }
}

Я хотел включить часть элементов, потому что не уверен, может ли это повлиять на это. Компонент FunctionComponent заключен в провайдер Stripe Elements. Не уверен, почему это сработает, но я решил, что должен включить его на всякий случай.

Функциональный компонент: 

const FunctionComponent = (props) => {
    const fetchSomething = () => {
        fetch('fetch is made here and is successful')
        .then(response => {
            if (some_condition) {
                props.setSubscription({value1: 1, value2: 2}))
            }
        } 
    }
}

Проблема в том, что функциональный компонент даже не распознает реквизиты .setSubscription как функция (как говорится в ошибке).

Я пробовал консоль регистрировать переменную props, и на самом деле в ней есть функция setSubscription, поэтому я понятия не имею, в чем может быть проблема. Я пытался понять это и полностью озадачен. Кто-нибудь знает, почему возникает эта ошибка?

1 Ответ

0 голосов
/ 03 августа 2020

then должен иметь обратный вызов, попробуйте это: 

const FunctionComponent = (props) => {
    const fetchSomething = () => {
        fetch('fetch is made here and is successful')
        .then(()=>props.setSubscription({value1: 1, value2: 2}))  
    }
}
...