从组件响应本机函数调用

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，它将根据数据库中的内容显示状态 "INACTIVE" : "ACTIVE"。在 pressing/tapping 上，"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 到 return 响应的情况下更新状态，但是您应该再次更新状态以防 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 组件，这将更新组件的状态。

从组件响应本机函数调用

React Native Function Call from Component

javascript

function-call

react-native

react-native-flatlist