React之报错笔记及常见交互应用（三）

总结了一些在react项目中遇到的问题
1.和微信小程序一样的push事件不能直接用
错误：

      let newCart = this.state.shopcart.push(item);
        this.setState({shopcart:newCart});

正确：

      let newCart = this.state.shopcart;
        let newCartLen = newCart.length;
        newCart[newCartLen] = item;
        this.setState({shopcart:newCart});

2.react是单向数据流，所以这个用法是ok的
场景：点击增加商品数量

render:

fn:
 addNum(num,e){
        num+=1;
    }

3.input表单赋值
场景：购物车数量随在input框内添数字改变

render:
 {v.songNum}
Fn:
  handleChange(v,event) {
        v.songNum = parseFloat(event.target.value);
        this.setState({shopcart:this.state.shopcart});
    }

错误：

render:
 {v.songNum}
Fn:
  handleChange(v,event) {
        v = parseFloat(event.target.value);
        this.setState({shopcart:this.state.shopcart});
    }

4.多input表单处理

image.png

class Tableadd extends Component{
    constructor(props){
        super(props)
        this.state = {
            name:'',
            address:'',
            tel:''
        }
    }
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
        this.setState({
            [name]: value
        });
        console.log(this.state);
    }

    handleChange(){

    }

    render(){
        return(
            

                

                    姓名：
                    

                        
                    
                
                

                    爱好：
                    

                        
                            Grapefruit
                            Lime
                            Coconut
                            Mango
                        
                    
                
                

                    地址：
                    

                        
                    
                
                

                    电话：
                    

                        
                    
                
            
        )
    }
}


export default Tableadd;

当然你也可以不用state定义变量，写在redux中直接取也可以的

5.es6箭头函数

 componentDidMount(){
      this.timer = setInterval(()=>this.tick(),1000);
      console.log(this);
    }

为什么箭头函数就可以直接在this函数中接着写this不报错呢？
箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。
https://www.jianshu.com/p/c1ee12a328d2

7.点击，带参点击

这个方法在页面加载之初就循环了二十多遍。。因为没绑定bind
应该这样写啊：

不带参的：

带参的：

8.动态className

9.table的用法：
以下这种是会报错的，必须由tbody包含

10.公共方法引用
common.js：

import  'whatwg-fetch'
import {toggleloading} from './../redux/action/layer'

expor const sampleFn = ()=>{

}

export const fetchPosts = (postTitle,Fn) => (dispatch, getState) => {
    dispatch(toggleloading(true));
    return fetch(postTitle)
        .then(response => response.json())
        .then(json => {
            setTimeout(()=>{
                dispatch(toggleloading(false));
                return Fn(json);
            },1000)
        });
}

普通公共方法就直接应用就可以了，异步action方法需要在mapDispatchToProps函数中注入需要使用的公共方法

引用到页面：

import {fetchPosts,sampleFn} from '../../lib/common'

class Shop extends Component{
    componentWillMount(){

        sampleFn();

        this.props.fetchPosts('/api/data.json',(res)=>{
            this.props.getgoodlist(res.data.songs);
        })
    }

  render(){
      return(
          ...
        )
      }
｝

const mapStateToProps = (state) =>({
   ...
})
const mapDispatchToProps = (dispatch) =>({
    ...
    fetchPosts:(url,fn)=>dispatch(fetchPosts(url,fn))
})

export default connect(mapStateToProps,mapDispatchToProps)(Shop);

11.报错Proxy error
本来用的好好的，今早起来发现数据无法获取

Proxy error: Could not proxy request /api/data.json from localhost:3000 to localhost:5000 (ENOTFOUND).

找到占用5000端口的pid

netstat -aon|findstr “7000”

image.png

14112就是node.exe，找到592就是金山词霸。。。额，金山词霸右键点击结束进程

image.png

但还是不行，我改了一下proxy

"proxy": {
    "/api": {
      "target": "http://192.168.31.1:5000"  //这儿以前是 "http://localhost:5000
"
    }
  }

就好了
12.返回页面
这个除了Link标签以外当然也需要点击返回或跳转了

this.props.history.push('/shop')    返回指定页面
this.props.history.goBack()  返回上一页
this.props.history.go(-2)   返回上上一页

这几个方法不会刷新目标页，但是都会触发目标页面的componentWillMount()

13.定时器
一进来定时器就启动，返回首页时停止。这个this.interval属于该class的全局方法，不止可以在 componentDidMount（）中定义，也可以在方法中定义，因为我们也会有点击按钮启动定时器的业务场景

    componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000);
    }
    tick=()=>{
        console.log('kk--');
    }
    goShopIndex=()=>{
        clearInterval(this.interval);
        this.props.history.goBack()
    }