Question

我正在使用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，该API将根据数据库中的内容显示状态"INACTIVE" : "ACTIVE"。按下/轻按后，"INACTIVE" : "ACTIVE"将进行切换，同时将更新其在数据库中的值。

Answer 1

您基本上处于正确的轨道。尽管您可能想记住一些事情。

例如

<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);
    }}
>

这是在api调用完成之前对state.status的过度优化分配。如果api调用失败，在这种情况下，您的状态与数据库不同步该怎么办。您可以更新状态而无需等待API返回响应，但是如果API失败，则应该再次更新状态。

如果不需要乐观状态更新，则可以执行以下操作：

日期屏幕：

 //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组件，这将更新组件的状态。

反应来自组件的本机功能调用

1 个答案: