我知道这个问题有很多答案，但因为他们大多数都是老的(好吧，更老了)，没有人提到我非常喜欢的方法。简而言之:

使用功能组件和钩子。

长:

尝试使用尽可能多的函数组件，而不是类组件，特别是用于渲染，并尽量保持它们尽可能纯粹(是的，数据在默认情况下是脏的)。

功能组件有两个明显的好处(还有更多):

纯粹性或接近纯粹性使调试变得更加容易 功能组件不需要构造函数锅炉代码

快速证明第二点-这不是绝对恶心吗?

constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  

如果你使用功能组件进行更多的渲染，你将需要伟大的duo - hook的第二部分。为什么它们比生命周期方法更好，它们还能做什么，以及更多的东西，这将占用我很多空间，所以我建议你听他自己说:Dan对钩子的说教

在这种情况下，你只需要两个钩子:

一个名为useCallback的回调钩子。这样可以防止在重新渲染时反复绑定函数。

一个名为useState的状态钩子，用于在整个组件都是函数并整体执行的情况下保持状态(是的，由于钩子的魔力，这是可能的)。在该钩子中，您将存储toggle的值。

如果你读到这一部分，你可能想看看我所说的一切是如何应用于原始问题的。给你: 演示

对于那些只想看一眼组件和WTF是关于什么的人，这里是:

const Item = () => {

    // HOOKZ
  const [isVisible, setIsVisible] = React.useState('hidden');

  const toggle = React.useCallback(() => {
    setIsVisible(isVisible === 'visible' ? 'hidden': 'visible');
  }, [isVisible, setIsVisible]);

    // RENDER
  return (
  <React.Fragment>
    <div style={{visibility: isVisible}}>
        PLACEHOLDER MORE INFO
    </div>
    <button onClick={toggle}>Details</button>
  </React.Fragment>
  )
};

PS:我写这个是为了防止很多人有类似的问题。希望他们会喜欢我在这里展示的东西，至少好到可以再谷歌一点。这不是我说其他答案是错误的，这是我说，自从它们被写出来以来，有另一种方法(恕我直言，更好的方法)来处理这个问题。

onClick你应该调用函数，这叫做你的函数切换。

onClick={() => this.toggle()}

先忘掉react: 这与react无关，让我们了解Java Script的基本概念。例如，您已经在java脚本中编写了以下函数(名称为A)。

function a() {

};

问题1)如何调用我们已经定义的函数? 答:一个();

问题2)如何传递函数的引用，以便稍后调用它? 答:让乐趣= a;

现在回到你的问题，你已经使用了函数名的paranthesis，这意味着当下面的语句将被渲染时，函数将被调用。

< td > < span onClick = {this.toggle()} >细节< / span > < / td >

那么如何改正呢? 简单! !只要去掉括号。通过这种方式，您已经将该函数的引用提供给onClick事件。它只在单击组件时才会回调函数。

<td><span onClick={this.toggle}>Details</span></td>

一个与反应相关的建议: 避免使用有人在回答中建议的内联函数，这可能会导致性能问题。 避免下面的代码，它将在函数被调用时一次又一次地创建同一个函数的实例(lamda语句每次都会创建新实例)。 注意:并且不需要显式地将事件(e)传递给函数。你可以在函数中访问它而不传递它。

{< td > < span onClick = {(e) = > this.toggle (e)} >细节< / span > < / td >}

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

最近我得到了这个错误:

错误:迷你反应错误#185;访问https://reactjs.org/docs/error-decoder.html?invariant=185获取完整消息，或者使用非简化的开发环境获取完整错误和其他有用警告。

您刚刚遇到的错误的全文如下:

超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时，就会发生这种情况。React限制了嵌套更新的数量，以防止无限循环。

好的。这是我的案例，我使用react函数组件+ react钩子。让我们先看看错误的示例代码:

import { useEffect, useState } from "react";
const service = {
  makeInfo(goods) {
    if (!goods) return { channel: "" };
    return { channel: goods.channel };
  },
  getGoods() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          channel: "so",
          id: 1,
          banners: [{ payway: "visa" }, { payway: "applepay" }]
        });
      }, 1000);
    });
  },
  makeBanners(info, goods) {
    if (!goods) return [];
    return goods.banners.map((v) => {
      return { ...v, payway: v.payway.toUpperCase() };
    });
  }
};
export default function App() {
  const [goods, setGoods] = useState();
  const [banners, setBanners] = useState([]);

  useEffect(() => {
    service.getGoods().then((res) => {
      setGoods(res);
    });
  }, []);

  const info = service.makeInfo(goods);

  useEffect(() => {
    console.log("[useEffect] goods: ", goods);
    if (!goods) return;
    setBanners(service.makeBanners({}, goods));
  }, [info, goods]);

  return <div>banner count: {banners.length}</div>;
}

服务过程API调用，并有一些方法转换DTO数据视图模型。这与React无关。也许你的项目中有这样的服务。

我的逻辑是，横幅视图模型是从API返回的商品数据构建的。

useEffect({…}， [info, goods])有两个依赖项:info和goods。

当info和goods发生变化时，useEffect钩子将重新执行，设置横幅视图模型，看起来不错，对吧?

不!这将导致内存泄漏。useEffect钩子将无限地执行。为什么?

因为当setBanner()执行时，组件将重新呈现，const info = service.makeInfo(goods);语句将再次执行，返回一个新的info对象，这将导致useEffect的deps改变，导致useEffect再次执行，形成一个死循环。

解决方案:使用useMemo返回一个记忆值。使用这个记忆值作为useEffect钩子的依赖项。

// ...
 const info = useMemo(() => {
    return service.makeInfo(goods);
  }, [goods]);

  useEffect(() => {
    console.log("[useEffect] goods: ", goods);
    if (!goods) return;
    setBanners(service.makeBanners({}, goods));
  }, [info, goods]);

//... 

Codesandbox

这是因为你在渲染方法中调用toggle，这将导致重新渲染，toggle将再次调用，再次重新渲染，等等。

代码中的这一行:

{<td><span onClick={this.toggle()}>Details</span></td>}

你需要使onClick指向这个。切换而不是调用它。

要解决这个问题，请这样做:

{<td><span onClick={this.toggle}>Details</span></td>}

很多好答案，但都遗漏了一些例子，考虑到react/ react native中的钩子

正如上面的回答中所写的，回调不应该在子组件内部被“调用”，而只能被引用。

这意味着什么? 让我们考虑一个父组件，它有2个改变rgb颜色的子组件:

import React, { useState } from "react"
import {View, Text, StyleSheet } from "react-native"
import ColorCounter from "../components/ColorCounter"

const SquareScreen = () =>{
  const [red, setRed] = useState(0)
  const [blue, setBlue] = useState(0)
  const [green, setGreen] = useState(0)

 return (
   <View>
     <ColorCounter 
       onIncrease={() => setRed(red + 15)}
       onDecrease={() => setRed(red - 15)}
       color="Red"
     />
     <ColorCounter 
       onIncrease={() => setBlue(blue + 15)}
       onDecrease={() => setBlue(blue - 15)} 
       color="Blue" 
     />
     <ColorCounter 
       onIncrease={() => setGreen(green + 15)}
       onDecrease={() => setGreen(green - 15)}
       color="Green" 
     />
    <View 
      style={{ 
        height:150,
        width:150, 
        backgroundColor:`rgb(${red},${blue},${green})`
      }}
    />
    </View>
 )   
}

const styles = StyleSheet.create({})

export default SquareScreen

这是子按钮组件:

import React, { useState } from "react"
import {View, Text, StyleSheet, Button } from "react-native"

const ColorCounter = ({color, onIncrease, onDecrease}) =>{
  return (
    <View>
      <Text>{color}</Text>
      <Button onPress={onIncrease}  title={`Increase ${color}`} /> --> here if you use onPress={onIncrease()} this would cause a call of setColor(either setRed,SetBlue or setGreen) that call again onIncrease and so on in a loop)
      <Button onPress={onDecrease}  title={`Decrease ${color}`} />
    </View>  
  )  
}

export default ColorCounter