Как увеличить скорость осей? - PullRequest
0 голосов
/ 08 января 2019

Потому что я новичок в использовании axios, поэтому у меня обычно возникают проблемы с его использованием. В частности, сейчас я делаю функцию react-infinite-scroll, но когда я сравниваю ее скорость с другим сайтом, мой пост (функция react-infinite-scroll) будет показываться медленно. Тогда я думаю, что эта проблема вызвана 2 причинами
1. Я не использую axios правильно
2. Есть вещь, которая делает axios скорость урграда, но я ей не пользуюсь
Вот мой код, пожалуйста, дайте мне несколько советов по увеличению скорости http-запроса.

Спасибо, что прочитали мой вопрос!

class MainPage extends Component {

    constructor(props) {
        super(props)
        axios.get("http://127.0.0.1:8000/api/question")
        .then(res => {
            this.setState({
                AnswerPostMultiList: res.data
            })
          }
        )
        .catch(err => {
            console.log(err)
        })
    }

    state = {
        AnswerPostMultiList : []
    }

    componentDidMount() {
        window.addEventListener("scroll", this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll);
    }

    handleScroll = () => {

        console.log("scroll is executing")

        const { innerHeight } = window;
        const { scrollHeight } = document.body;

        const scrollTop =
          (document.documentElement && document.documentElement.scrollTop) ||
          document.body.scrollTop;

        if (scrollHeight - innerHeight - scrollTop < 1000 && !this.props.isLoading["isLoading"]) {
          this.props.onIsLoading() #To prevent this code from calling back continuously, change the value of this.props.isLoading["isLoading"] to false 

              axios.get("http://127.0.0.1:8000/api/question")
              .then(res => {

              this.setState({
                  AnswerPostMultiList: this.state.AnswerPostMultiList.concat(res.data)
              })
              this.props.onIsLoading() #change the value of this.props.isLoading["isLoading"] to true 
            }
          )
          .catch(err => {
              console.log(err)
          })
        }
      };

    render() {
        return(
            <>

                <PageHeader />
                <div className="find_members">
                { this.state.AnswerPostMultiList.map((answerpost,index) => {
                    return <AnswerPostMulti question={answerpost.question_text} q_owner={answerpost.question_owner} answer={answerpost.answer_image} a_owner={answerpost.answer_owner} key={index} />
                  })
                }
                </div>

            </>
        )
    }
}



const mapDispatchToProps = (dispatch) => ({
    onIsLoading: () => {
        dispatch(isLoadingActions.isLoading())
    }
  })

  const mapStateToProps = state => ({
      isLoading: state.isLoading
  })


export default connect(mapStateToProps, mapDispatchToProps)(MainPage)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...