chatgpt-index.jsx

import React, { useContext, useState, useMemo, useRef } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import chatgpt from './chatgpt.png';
import user from './user.png';
import { useEffect } from 'react';
import { PageRouterContext } from "../../App";
import config from "../../ config/config";
export default function App1() {
  const [comments, setComments] = useState([]);
  const [userName, setUserName] = useState("");
  const list_container_id = useRef(null)
  const changeRoute = useContext(PageRouterContext);
  const navigateTo = (changeRoute, id) => {
    changeRoute({ id: id });
  };

  const getList = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([{
          text: '汗滴禾下土谁知中餐汗滴',
        }, {
          text: '汗滴禾下土谁知中餐汗滴中餐',
        }, {
          text: '汗滴禾下土谁知中餐汗滴禾下',
        }]);
      }, 0)
    })
  }
  const renderList = () => {
    return comments.length === 0 ?
      (<div className='no-comment'>暂无问题，快去提问吧~</div>)
      : (
        <div
          ref={(el) => {
            list_container_id.current = el;
          }}
          id="list_container_id"
          className="list_container"
        >
          <ul style={{ color: 'white' }}>
            {comments.map((item, index) => (
              <li key={item.id} style={{ color: 'white' }}>
                <div
                  className='quiz'>
                  <img className='quiz_avatar' src={user} />
                  <span style={{ marginLeft: 8 }}>提问： {item.name}</span>
                </div>
                <div
                  className='answer'>
                  <img className='quiz_avatar' src={chatgpt} />
                  <ClickFingerTextBoard dataList={item.contents} index={index} />
                </div>
              </li>
            ))}
          </ul>
        </div>
      )
  }
  const handleForm = (e) => {
    setUserName(e.target.value)
  }
  const scrollBottom = () => {
    if (!list_container_id.current) {
      return;
    }
    setTimeout(() => {
      list_container_id.current.scrollTop = list_container_id.current.scrollHeight
    }, 0);
  }
  const addComment = async (e) => {
    if (userName.trim() === '') {
      alert('请输入问题');
      return
    }
    let responseList = await getList();
    comments.push({
      id: Math.random(),
      name: userName,
      contents: responseList
    });
    setComments(comments);
    setUserName('');
  }
  // componentDidUpdate() {
  //   this.scrollBottom()
  // }
  useEffect(() => {
    scrollBottom()
  })

  const back = () => {
    navigateTo(changeRoute, config.pages.home);
  }

  // console.log('comments', this.state.comments)
  // const { userName } = this.state;
  return (
    <div className='app_container'>
      <div className='no-comment'>
        <button onClick={back} className="confirm_button">返回</button>
      </div>
      {renderList()}
      <div className='input_style'>
        <input
          className='input_quertion'
          type="text"
          placeholder="请输入问题"
          value={userName}
          name="userName"
          onChange={handleForm}
        />
        <div style={{ width: '1%' }}></div>
        <button onClick={addComment} className="confirm_button">发起提问</button>
      </div>
    </div>
  )

}
  
  const ClickFingerTextBoard = React.memo(({ dataList, index }) => {
  console.log('更新组件', index)
  const [list, setList] = useState(dataList);
  const [count, setCount] = useState(1);
  let innerText = useRef([])

  const delay = (time) => {
    return new Promise((resolve) => {
      let timers = setInterval(() => {
        clearInterval(timers);
        resolve();
      }, time);
    })
  };
  useEffect(() => {
    let newList = [];
    let timer1 = null;
    let timer2 = null;
    const calculatedFigures = async () => {
      list.map((item) => {
        newList.push(item.text.split(''));
      });
      timer1 = setTimeout(async () => {
        for (let i = 0; i < newList.length; i++) {
          innerText.current.push([]);
          for (let j = 0; j < newList[i].length; j++) {
            await delay(50);
            innerText.current[i] = innerText.current[i] + newList[i][j];
          }
        }
        clearTimeout(timer1);
        clearInterval(timer2);
      }, 0);
    }

    if (list && list.length) {
      calculatedFigures();
      timer2 = setInterval(() => {
        setCount((count) => count + 1);
      }, 100)
    }
    return () => {
      clearTimeout(timer1);
      clearInterval(timer2);
    }
  }, [])
  return <div>{
    innerText.current.length && innerText.current.map((text, index) => {
      return <div style={{ marginLeft: 8, marginBottom: 10 }} key={index}>回答： {text}</div>
    })
  }</div>

})