调用chatGPT制作小程序的小程序，所以程序员都能用上chatGPT

最新推荐文章于 2025-04-11 20:46:10 发布

lrbfly

最新推荐文章于 2025-04-11 20:46:10 发布

阅读量616

点赞数

文章标签： chatgpt 小程序

本文链接：https://blog.youkuaiyun.com/lrbfly/article/details/130675230

版权

文章展示了如何使用ChatGPT生成React组件代码，通过一个简单的聊天应用实例，输入文本并发送请求到/api/goodsInfo获取响应数据。此应用适用于手机和PC，便于学习和快速开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多少，直接上案例。下面给让我为大家演示一下ChatGPT生成的React框架的前端代码:

import React, { useState } from 'react';
import axios from 'axios';

const ChatApp = () => {
  const [inputText, setInputText] = useState('');
  const [outputText, setOutputText] = useState('');

  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('/api/goodsInfo', { id: 123456});
      setOutputText(response.data.output);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>ChatGPT小程序制作工具示例</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputText} onChange={handleInputChange} />
        <button type="submit">发送</button>
      </form>
      <div>
        <p>{outputText}</p>
      </div>
    </div>
  );
};

export default ChatApp;

通过扫码小程序二维码即可加入使用学习，正版的原创的chatGPT,无需科学上网，手机+PC都可以，加速您摸鱼的神器来了