错误：类型“void”不可分配给类型“ReactNode”

Posted 2023-02-22

【中文标题】错误：类型“void”不可分配给类型“ReactNode”

【英文标题】：Error: Type 'void' is not assignable to type 'ReactNode'

【发布时间】：2020-07-22 16:57:57

【问题描述】：

我试图在调用函数时出错，这只是为了练习，所以我将所有内容都保存在 App.tsx 中。我的班级是这样的：

enum Actor 
  None = '',


const initializeCard = () => 
  //some logic here
  return card;


export default class App extends Component<, State> 
  state: State =
    card: initializeCard()
  

  public renderRows = () => 
    const  card  = this.state;
    board.map((actor, index) => this.renderRow(actor, index));
  

  public renderRow = (actor: Actor, index: number) => 
    return(
      <div className="cell">

      </div>
    )
  

  public render() 
    return (
      <div className="App">
        <div>
             this.renderRows()  // Here I'm getting the error
        </div>
      </div>
    )
  

我的 Package.json 看起来像：

"dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  

完整的错误如下：

类型 'void' 不可分配给类型 'ReactNode'.ts(2322) index.d.ts(1348, 9)：预期的类型来自属性 'children' 这是在类型上声明的 'DetailedhtmlProps, HTMLDivElement>'

我已搜索此错误的解决方案并找到 this，但我无法使用此解决方案解决我的问题。请让我知道我该如何解决这个问题。谢谢。

【问题讨论】：

你需要从你的函数中返回一些东西。 renderCell 函数在哪里？也许你的意思是renderRow？

是的，对不起，它是 RenderRow()，我已经更正了，谢谢，我忘了返回。您能否将其发布为答案，我会接受。

很高兴@user1547554，我发布了。谢谢！

【参考方案1】：

你需要从你的函数中返回一些东西。

renderCell 函数在哪里？也许你的意思是renderRow？

【参考方案2】：

确保renderRows 函数返回它呈现的行，而不是仅仅呈现它们而不做任何事情。

enum Actor 
  None = '',


const initializeCard = () => 
  //some logic here
  return card;


export default class App extends Component<, State> 
  state: State =
    card: initializeCard()
  

  public renderRows = () => 
    const  card  = this.state;
    return board.map((actor, index) => this.renderRow(actor, index));
  

  public renderRow = (actor: Actor, index: number) => 
    return(
      <div className="cell">

      </div>
    )
  

  public render() 
    return (
      <div className="App">
        <div>
             this.renderRows()  // Here I'm getting the error
        </div>
      </div>
    )