react.js - 请教一个react的问题

问题描述

问 题

现在项目里面部分区域用了react，遇到个tab切换问题，请教下。

点击上方的按钮，发送不同的api请求，下面显示不同的数据。本来我是直接把下面的数据数据就写在本组件里面，但是发现如果点击切换的时候，发送的请求过快，就比如说我点击了回放请求了apiA，然后没等请求成功我又点击预告，请求了apiB,这个时候就会出现，如果apiB先请求完成，那么先显示apiB的数据，然后apiA请求成功后，数据又会被渲染成apiA的数据了。
因为这个问题我就把下面的数据显示那块扔在一个子组件中，然后通过父组件传url过去请求不同的数据，在父组件通过判断点击来渲染，但是这个问题还是存在。
我父组件的代码如下:

import React, {Component} from 'react';
import {render} from 'react-dom';
import request from 'superagent';
import LivingList from './components/LivingMoreList';
import Page from './components/Page';
import Loading from 'halogen/RiseLoader';
import Tab from './components/LivingMoreTab'
import {isEmptyObject} from './libs/isEmptyObject'

class LivingMore extends Component {
    constructor() {
        super();

        this.state = {
            con: [
                {
                    checked: true,
                    content: '直播中'
                },
                {
                    checked: false,
                    content: '预告'
                },
                {
                    checked: false,
                    content: '回放'
                },
            ],
            count: 0,
            livinglist: <Tab url="/api/course/list?type=today"/>
        }
    }


    render() {

        let ChangeClass = (count) => {
            let num;
            let item = this.state.con.map((item, index) => {
                item.checked = false
                if (count === index) {
                    item.checked = true
                    num = count
                }
                return item
            })
            if (this.state.count === count) {
                return
            }

            if (count === 0){
                this.setState({
                    livinglist: <Tab url="/api/course/list?type=today"/>
                })
            }else if (count === 1){
                this.setState({
                    livinglist: <Tab url="/api/course/list?type=future"/>
                })
            }else if (count === 2){
                this.setState({
                    livinglist: <Tab url="/api/course/list?type=sofar"/>
                })
            }

            this.setState({
                con: item,
                count: num,
                show: true,
                page: 1,
                err: false
            }, this.courseApi)
        }

        let list = this.state.con.map((item, index) => {
            return (
                <li key={index}
                    className={item.checked ? 'livingMore-Button-checked' : ''}>
                    <a href="javascript:void (0);"
                       onClick={ChangeClass.bind(this, index)}>
                        {item.content}
                    </a>
                </li>
            )
        })

        return (
            <div className="layui-main" style={{marginBottom: 30 + 'px'}}>
                <div className="livingMore-Button">
                    <ul className="layui-clear">
                        {list}
                    </ul>
                </div>
                {
                    this.state.livinglist
                }
            </div>
        )
    }
}

render(
    <div>
        <div className="livingMore-banner"></div>
        <LivingMore/>
    </div>,
    document.getElementById('exp')
)

代码写的有点不好，请见谅，因为之前我做Vue的时候,通过内置的v-if判断，不会出现这样的问题，应该是每次切换的时候子组件都销毁然后重新渲染了，而react里面没有重新渲染，所以这样了，有没有什么办法解决，请教下

解决方案

方法一：
我觉得可以一次性把三个组件都挂载，相当于一个 url 渲染一个 <Tab/>，如果通过 state 来控制 <Tab/> 是隐藏还是显示。这种方法就不用考虑 ajax 异步的问题：

<div className="layui-main" style={{marginBottom: 30 + 'px'}}>
    <div className="livingMore-Button">
        <ul className="layui-clear">
            {list}
        </ul>
    </div>
    <div className="living-list-container">
      <Tab visible={this.state.activeTab="today"} url="/api/course/list?type=today"/>
      <Tab visible={this.state.activeTab="future"} url="/api/course/list?type=future"/>
      <Tab visible={this.state.activeTab="sofar"} url="/api/course/list?type=sofar"/>
    </div>
</div>

方法二：
给异步的请求加一个 token 标示，然后在响应时把前端的 token 一同返回，比较响应的 token 跟客户端最新的 token 值是否相等，相等时才更新 state。 这种方法就需求服务端的配合。

这篇关于react.js - 请教一个react的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！