javascript - 从组件响应 native 函数调用

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

日期列表组件:

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

日期列表组件:

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

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

...

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

这样，在 api 调用之后，日期屏幕的状态将被更新......这反过来将更新 DateList 组件，这将更新组件的状态。