Реагировать на собственный вызов функции из компонента - PullRequest
Новая
       11

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

0 голосов
/ 03 марта 2020

Я использую Flatlist, чтобы показать список дат. Я создал компонент DateList для просмотра списка элементов.

Я уже вызвал API apiFreelancerDate. Однако в настоящее время я пытаюсь вызвать другую функцию через компонент (который я позже буду использовать для второго вызова API).

Экран даты: 

apiFreelancerDate = () => {
    let self = this;
    AsyncStorage.getItem('my_token').then((keyValue) => {
        axios({
            method: 'get',
            url: Constants.API_URL + 'user_m/confirmation_date/',
            params: {
                freelancer_id: self.props.navigation.state.params.fr_id,
            },
            responseType: 'json',
            headers: {
                'X-API-KEY': Constants.API_KEY,
                'Authorization': keyValue,
            },
        })
            .then(function (response) {
                self.setState({
                    dataSource: response.data.data,
                    isLoading: false,
                });
            })
            .catch(function (error) {
                console.log('Error Response: ', error.response);
            });
    }, (error) => {
        console.log('Error', error) //Display error
    });
}

 //test function call
testFunc = () => {
    console.log('test function called');
}
//test function call

viewFreelancerDate() {
    const { dataSource } = this.state;

    return (
        <View>
            {<FlatList
                data={dataSource}
                keyExtractor={({ id }, index) => index.toString()}
                renderItem={({ item }) => <DateList {...item} functionCall={this.testFunc}/>}
            />}
        </View>
    );
}

Компонент DateList: 

            <TouchableOpacity
                style={{ flex: 1 }}
                onPress={() => this.props.navigation.navigate('masterFreelancerTime')}
            >
                <Text style={styles.textStartDate}>{this.props.date_start}</Text>
            </TouchableOpacity>

            <TouchableOpacity
                style={styles.activeBorder}
                onPress={() => {
                    this.props.functionCall;
                    const newStatus = !this.state.status;
                    this.setState({
                        status: newStatus,
                    });
                    console.log('status: ', this.state.status);
                    console.log('Date: ', this.props.date_start);
                }}
            >
                <Text style={styles.active_inactive}>{this.state.status ? "INACTIVE" : "ACTIVE"}</Text>
            </TouchableOpacity>

Я очень новичок в этом, поэтому любая помощь будет оценена, и я не знаю, является ли это правильным способом.

Моя основная цель состоит в том, чтобы я хотел добавить вызов функции, который будет вызывать API, который будет показывать состояние "INACTIVE" : "ACTIVE" в зависимости от того, что находится в базе данных. И после нажатия / нажатия, "INACTIVE" : "ACTIVE" будет переключаться и одновременно обновлять свое значение в базе данных.

1 Ответ

1 голос
/ 03 марта 2020

Вы в основном на правильном пути. Хотя вы, возможно, захотите иметь в виду несколько вещей.

например, 

<TouchableOpacity
    style={styles.activeBorder}
    onPress={() => {
        this.props.functionCall;
        const newStatus = !this.state.status;
        this.setState({
            status: newStatus,
        });
        console.log('status: ', this.state.status);
        console.log('Date: ', this.props.date_start);
    }}
>

Это overoptimisi c присвоение state.status до завершения вызова API. Что если сбой вызова API, в этом случае ваш статус не совпадает c с базой данных. Вы можете обновить состояние, не дожидаясь, пока API вернет ответ, но вы должны обновить состояние снова в случае сбоя API.

Если вам не нужно оптимистическое c обновление состояния, тогда вы можете сделать что-то например:

Экран даты: 

 //test function call
testFunc = () => {
    console.log('test function called');
    const dataSource = makeAPiCallAndGetUpdatedApiSource();

    this.setState({ dataSource });
}
//test function call

viewFreelancerDate() {
    const { dataSource } = this.state;

    return (
        <View>
            {<FlatList
                data={dataSource}
                keyExtractor={({ id }, index) => index.toString()}
                renderItem={({ item }) => <DateList {...item} functionCall={this.testFunc}/>}
            />}
        </View>
    );
}

Компонент DateList: 

constructor(props) {
    this.state = {
        status: props.status
    };
}
...

componentDidUpdate() {
    this.setState({ status: this.props.status })
}

...

<TouchableOpacity
    style={styles.activeBorder}
    onPress={() => {
        this.props.functionCall();
    }}
>

Таким образом, после вызова API будет обновляться экран состояния даты .. ... который, в свою очередь, обновит компонент DateList, который обновит состояние компонента.

...