使用 Hooks 从函数中响应 Native Post 调用答案

【问题标题】：React Native Post call from a function using Hooks使用 Hooks 从函数中响应 Native Post 调用
【发布时间】：2020-07-02 19:42:11
【问题描述】：

我是 React Native 的新手，所以请原谅我的无能。我正在尝试从函数调用 axios 帖子，但出现错误。有人可以看看我的代码并告诉我哪里出错或如何使用 axios 发布。我正在尝试做的是构建一个简单的时钟并将时间戳数据与类型（clock_in 或 Clock_out）一起发布到我通过 spring boot 生成的其余部分）

    const TimeclockScreen = ({navigation}) => {

    const ClockFunc = () => {
        const [TimeClockFunc, setTimeClockFunc] = useState(
            { timeclock_type: '', tc_timestamp: { dt } //Dt is the realtime Clock Data}
        );
        const handleChange = (event) => {
            setTimeClockFunc({ ...TimeClockFunc, [event.target.name]: event.target.value })
        }

        const handleSubmit = (e) => {
            e.preventDefault()
            axios.post('http://localhost:8080/timeclocks', TimeClockFunc)
                .then(function (response) {
                    console.log(response)
                })
                .catch(function (error) {
                    console.log(error)
                })
        }
    }

    const [ClockInEnabled, setClockInEnabled] = useState(true);
    const [ClockOutEnabled, setClockOutEnabled] = useState(false);

    const [dt, setDt] = useState(new Date().toLocaleString());

    useEffect(() => {
        let secTimer = setInterval(() => {
            setDt(new Date().toLocaleString())
        }, 1000)

        return () => clearInterval(secTimer);
    }, []);

    const handleClockInPressed = () => {
        setClockInEnabled(false);
        setClockOutEnabled(true);
        this.handleSubmit();
        alert('Clocked In');
    };

    const handleClockOutPressed = () => {
        setClockInEnabled(true);
        setClockOutEnabled(false);
        this.handleSubmit();
        alert('Clocked Out')
    };
return(
<View style={styles.container}>

            <Text>{'\n'}{'\n'}{'\n'}{dt}</Text>
                <TouchableOpacity
                    disabled={!ClockInEnabled}
                    onPress={handleClockInPressed}
                    style={[styles.button, {
                        borderColor: '#009387',
                        borderWidth: 1,
                        marginTop: 15
                    }]}
                </TouchableOpacity>

             
                <TouchableOpacity
                    disabled={!ClockOutEnabled}
                    onPress={handleClockOutPressed}
                    style={[styles.button, {
                        borderColor: '#009387',
                        borderWidth: 1,
                        marginTop: 15
                    }]}
                </TouchableOpacity>

          <View>
  );
}

【问题讨论】：

标签： javascript reactjs react-native axios react-hooks

【解决方案1】：

现在已解决。我使用了本地机器的 192.168 IP 地址，它工作正常。

【讨论】：