react报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

---

一、报错语句是什么意思？

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
错误：重新渲染过多。React限制渲染的数量以防止无限循环。

二、复现步骤，及其改法

1.错误代码

代码如下（示例）：

  const handlePreview = (url) => {
    setIsModalVisible(true)
    setPreviewUrl(url)
  }
 return (
        <div className="img-item" key={index}>
          <img
            style={{ width: "100%", height: "100%" }}
            src={item.url}
            alt={item.name}
            onClick={handlePreview(item.url)}
          />
         </div>
        );

2.修改方式

代码如下（示例）：

  const handlePreview = (url) => {
    setIsModalVisible(true)
    setPreviewUrl(url)
  }
 return (
        <div className="img-item" key={index}>
        method===1?
        // 方法（1）
          <img
            style={{ width: "100%", height: "100%" }}
            src={item.url}
            alt={item.name}
            onClick={()=>handlePreview(item.url)}
          />
          :
          // 方法（2）
          <img
            style={{ width: "100%", height: "100%" }}
            src={item.url}
            alt={item.name}
            onClick={handlePreview.bind(this,item.url)}
          />
         </div>
        );

3.报错原因

在react中 handlePreview(item.url)会直接执行，不是点击触发

4.bind(this,data)

语法：
fun.bind(thisArg[, arg1[, arg2[, …]]])
thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时，该参数无效。
arg1, arg2, … （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

bind后的this指向的是上下文，也就是这个组件，这个组件才有你所需要的方法,不懂没关系看代码↓

	this.all = '外部'
	var obj = {
		all:'内部',
		cb:function(){
			console.log(this.all)
		}
	}
	obj.cb();                         //  内部
	var out = obj.cb;
	out();                            //  外部
	var internal = out.bind(obj)
	internal();                       //  内部

---

总结

	可以采用箭头函数的方式，也可以采用bind()的方式解决此报错。有时间可以私下拓展一下bind()其他用法。