最近的React项目踩的坑和一些积累的经验

1: react项目中有时候在render里面写οnclick={function(参数)} ,如果在方法里传参的话进入页面时会自执行,

如果不想让方法自执行,将写法改为οnclick={()=>{function(参数)}}就行

2:

React异步未获取到数据的情况

如果页面渲染依赖异步数据，由于数据延迟，有的办法是：data&&渲染逻辑，意思是有数据时渲染，注意没数据时,return也应该有内容。
我通常添加一个判断条件，因为data&&渲染逻辑这种写法也许有多处。这个条件依赖state或props里某个数据，在没有拿到该数据时渲染为空，之后react会根据改数据变化渲染出内容。
举一个例子，contents这个值是react-redux所调用异步方法的返回值，在componentWillMount() 钩子中调用this.props.getPageContents()得到。那么在render()中，它的值开始为null，这时你要给它一个判断if(!contents)return<></> ，再续写渲染逻辑就没问题了。
注意这个判断条件是props或state定义的变量。
 

同时需注意,map方法不会检测空数组,如果用map方法遍历的数组为空,也会直接页面崩溃

3:

React写方法时,可以用Use方法名,在封装API时候命名,意思是自定义封装的函数,在这里面可以用

const [state, setState] = useState([]);

  useEffect(() => {

    request(url, {

      method: 'post',

      data: parms,

    }).then((res) => {

      let nowuse = [];

      res.data.forEach((v, i) => {

        v.key = i;

        console.log(v);

        console.log(123);

        nowuse.push(v);

      });

      setState([]);

      setState(nowuse);

    });

  }, []);

  return state;

这种写法来进行数据处理,这样返回出去的会是直接处理好的数据,

但是如果你这样使用,调用方法后将无法处理数据,有利有弊,慎用\

4 如果拿const定义方法的话,想复用这个方法,则方法名后面不能加括号 

即原本为 const a=方法()

改为          const a=方法        即可复用

方法名后加括号等于被调用了一次了

5 React中组件如果想动态获取某个内容(在本项目中是用的Datepicker日期选择期)设置defaultValue,项目需求是根据不同的人动态获取默认时间,如果直接设置defaultValue={Date}不会动态获取,这是在组件上设置一个Key={Date}属性,即可每次都重新获取一次属性,Key的值跟动态获取的值要相同