Javascript 表示rowRenderer不是函数时出错

我正在尝试实现

react虚拟化

，所以我进入了官方文档，并在我的代码中完成了它，下面是我的代码：

import React from "react";
import { List } from "react-virtualized";

class Users extends React.Component {
  state = {
    userList: ["1", "222", "33"]
  };

  rowRenderer({ key, index, isScrolling, isVisible, style }) {
    return (
      <div key={key} style={style}>
        {
console.log(this.state.userList[index])
//this.state.userList[index]
}
      </div>
    );
  }

  render() {
    return (
      <div>
        <List
          width={300}
          height={300}
          rowCount={this.state.userList.length}
          rowHeight={20}
          rowRenderer={Users.rowRenderer}
        />
      </div>
    );
  }
}
export default Users;

从“React”导入React；
从“react virtualized”导入{List}；
类用户扩展React.Component{
状态={
用户列表：[“1”、“222”、“33”]
};
行渲染器（{key，index，isScrolling，isVisible，style}）{
返回(
{
console.log（this.state.userList[index]）
//this.state.userList[索引]
}
);
}
render（）{
返回(
);
}
}
导出默认用户；

现在这个东西在

rowRender

函数中，它

console.log

非常完美。但是当我用注释行替换它时，它会给我一个错误，告诉我行渲染器不是一个函数，当我在前面添加

函数

时，它会得到解析错误

如何解决这个问题？

---

在codesandbox中，它又给出了一个错误：抛出了一个跨源错误。

Users

是您的类定义，但是

rowRenderer

函数是类实例上的一个方法。您应该改用

this.rowRenderer

import React from "react";
import { List } from "react-virtualized";

class Users extends React.Component {
  state = {
    userList: ["1", "222", "33"]
  };

  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    return (
      <div key={key} style={style}>
        {this.state.userList[index]}
      </div>
    );
  }

  render() {
    return (
      <div>
        <List
          width={300}
          height={300}
          rowCount={this.state.userList.length}
          rowHeight={20}
          rowRenderer={this.rowRenderer}
        />
      </div>
    );
  }
}
export default Users;

从“React”导入React；
从“react virtualized”导入{List}；
类用户扩展React.Component{
状态={
用户列表：[“1”、“222”、“33”]
};
rowRenderer=（{key，index，IsCrolling，isVisible，style}）=>{
返回(
{this.state.userList[index]}
);
}
render（）{
返回(
);
}
}
导出默认用户；

您可以在渲染后尝试编写rowRenderer函数。有完整的代码，只有我可以测试。大概是这样的：

    import React from 'react';
    import * as StaticData from '../StaticData'
    import {List} from 'react-virtualized';

    class Users extends React.Component{

        state={
    userList:['1','222','33']
        };

        componentDidMount() {
            StaticData.getData("/users").then(data => {
                this.setState({userList:data});
                console.log(this.state.userList)
            });
        }

        render() {


                function rowRenderer({
                    key,
                    index,
                    isScrolling,
                    isVisible,
                    style,
                }) {
                    return (
                    <div key={key} style={style}>
                    {
                    console.log(key)
                    //this.state.userList[index]
                    }
                    </div>
                    );
                    }
            return(
                <div>

                    <List
                        width={300}
                        height={300}
                        rowCount={this.state.userList.length}
                        rowHeight={20}
                        rowRenderer={Users.rowRenderer}
                    />
                </div>
            );
        }
    }
export default Users;

从“React”导入React；
将*作为StaticData从“../StaticData”导入
从“react virtualized”导入{List}；
类用户扩展React.Component{
陈述={
用户列表：['1'，'222'，'33']
};
componentDidMount（）{
StaticData.getData（“/users”）。然后（data=>{
this.setState（{userList:data}）；
console.log（this.state.userList）
});
}
render（）{
函数行渲染器({
钥匙
指数
伊斯克罗林，
可见，
风格
}) {
返回(
{
console.log（键）
//this.state.userList[索引]
}
);
}
返回(
);
}
}
导出默认用户；

Uncaught TypeError:无法读取未定义的属性“state”

两个选项，请使用

rowRenderer={（）=>this.rowRenderer}

或将您的

rowRenderer

方法设置为箭头函数（最后一个选项更容易，因为您不必向下钻取参数）。错误较少，但请参阅，它仍然没有呈现任何内容只要问为什么即使在

'react-virtualized/styles.css'

之后，它也没有呈现任何样式？？使用

此.rowRenderer

，此函数是您的类的成员。