Javascript 尝试显示数据时显示未捕获错误

我试图从头开始编写reactjs分页代码，但由于以下错误，我一直在进行中

1.）Reactjs在尝试显示数据库中的记录时显示以下错误 “未捕获类型错误：无法读取未定义的属性“setState”

2.）当我单击页面链接时，它会显示“未捕获引用错误：未定义显示记录” 在htmlanchoreElement.onclick“。下面的javascript中似乎没有很好地定义或绑定displayRecords（）函数

3.）当我单击下拉链接时，它会显示“未捕获引用错误：未定义changeDisplayRowCount” 在HTMLSelectElement.onchange“。在下面的javascript中，changeDisplayRowCount（）函数似乎没有很好地定义或绑定

请有人可以运行脚本，并帮助我解决这个问题。至少即使这只是第一个错误（“UncaughtTypeError:无法读取未定义的”）的属性“setState”）

行数限制：
10
20
30
类NameForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
componentDidMount（）{
函数显示记录（numRecords、pageNum）{
var show=numRecords；
var pagenum=pagenum；
警报（显示）；
$.ajax({
键入：“GET”，
url:'getrecords.php'，
数据：{
节目：numRecords，
pagenum:pagenum
},
cache:false，
成功：功能（数据）{
显示：numRecords；
pagenum:pagenum；
$（“#显示”）
.html（数据）
.show（）；
//控制台日志（电子邮件）；
console.log（show）；
console.log（pagenum）；
this.setState（{data:data}）；
}.绑定（此），
错误：函数（jqXHR）{
console.log（jqXHR）；
}.绑定（此）
});
}//结束显示记录
函数changeDisplayRowCount（numRecords）{
显示记录（numRecords，1）；
}
$（文档）.ready（函数（）{
显示记录（10,1）；
});
}
render（）{
返回(
{this.state.data(
) : (
加载。。。
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

getrecords.php

<?php

echo $page = $_GET['pagenum'];
echo $show = $_GET["show"];

// pagination
?>

您正在引用一个函数，

displayRecords

，该函数不在页面的全局范围内，它是在

componentDidMount

中定义的，您的HTML标记无法使用该函数

select

标签在

标签内无效
您同时使用HTML和React，为什么
您正在未绑定函数中绑定
this
，其中
this
解析为根范围，这就是为什么未定义
setState
的原因
您正在使用jquery设置标记的内部HTML，而不是react。。。为什么?
您正在使用
危险的LysetinerHTML
，您不应该这样做，有更好的方法
您正在从React组件中调用
$（document）.ready
。。。如果组件已安装，则文档已准备就绪，这是不需要的逻辑
以下是解决您的问题的直接方法：

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>


<a href="javascript:void(0);" class="links"  onclick="displayRecords('10', '1');" >Page</a>
<label> Rows Limit: 
<select name="show" onChange="changeDisplayRowCount(this.value);">
  <option value="10" >10</option>
  <option value="20" >20</option>
  <option value="30" >30</option>
</select>
</label>
<div id="root"></div>
<script type="text/babel">
window.displayRecords = function(){
    alert('Component not mounted yet.');
};

window.changeDisplayRowCount = function(){
    alert('Component not mounted yet.');
}
class NameForm extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    window.displayRecords = (function displayRecords(numRecords, pageNum) {
      var show = numRecords;
      var pagenum = pageNum;

      alert(show);

      $.ajax({
        type: 'GET',
        url: 'getrecords.php',
        data: {
          show: numRecords,
          pagenum: pageNum
        },
        cache: false,
        success: function(data) {
          show: numRecords;
          pagenum: pagenum;

          $('#display')
            .html(data)
            .show();

          //console.log(email);

          console.log(show);
          console.log(pagenum);

          this.setState({data: data});
        }.bind(this),
        error: function(jqXHR) {
          console.log(jqXHR);
        }.bind(this)
      });
    }.bind(this) // end displayRecords

    window.changeDisplayRowCount = function changeDisplayRowCount(numRecords) {
      displayRecords(numRecords, 1);
    }

    $(document).ready(function() {
      displayRecords(10, 1);
    });
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <div dangerouslySetInnerHTML={{__html: this.state.data}} />
        ) : (
          <div>Loading...</div>
        )}
      </div>
    );
  }
}
ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);


</script>


行数限制：
10
20
30
window.displayRecords=函数（）{
警报（“尚未安装组件”）；
};
window.changeDisplayRowCount=函数（）{
警报（“尚未安装组件”）；
}
类NameForm扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
};
}
componentDidMount（）{
window.displayRecords=（函数displayRecords（numRecords，pageNum）{
var show=numRecords；
var pagenum=pagenum；
警报（显示）；
$.ajax({
键入：“GET”，
url:'getrecords.php'，
数据：{
节目：numRecords，
pagenum:pagenum
},
cache:false，
成功：功能（数据）{
显示：numRecords；
pagenum:pagenum；
$（“#显示”）
.html（数据）
.show（）；
//控制台日志（电子邮件）；
console.log（show）；
console.log（pagenum）；
this.setState（{data:data}）；
}.绑定（此），
错误：函数（jqXHR）{
console.log（jqXHR）；
}.绑定（此）
});
}.bind（this）//结束显示记录
window.changeDisplayRowCount=函数changeDisplayRowCount（numRecords）{
显示记录（numRecords，1）；
}
$（文档）.ready（函数（）{
显示记录（10,1）；
});
}
render（）{
返回(
{this.state.data(
) : (
加载。。。
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

虽然这将解决您的问题（或者可能应该这样），但您的代码应该是这样的：

function PageLink({page,onClick}){
  return <div className="pageLink" onClick={onClick.bind(null,page)}>
    {page}
  </div>;
}

function RowSelector({selected,onChange}){
  return (
    <div className="rowSelector">
      <label>Rows Limit:</label>
      <select onChange={(e) => onChange(e.target.value)} value={selected}>
          {[10,20,30].map(num => <option key={num} value={num}>{num}</option>)}
      </select>
    </div>
  )
}

function DataItem({item}){
  // Assumes data is a map with a name key.
  return <div>{item.name}</div>;
}

class Pagination extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      currentPage: 0,
      rowLimit: 10,
      data: [],
      loading: false
    };
    this.setCurrentPage = this.setCurrentPage.bind(this);
    this.setRowLimit = this.setRowLimit.bind(this);
  }

  updateData(){
    this.setState({loading: true});
    // This is just for mock purposes, remove this and use the ajax logic below.
    setTimeout(() => {
      this.setState({
        loading: false,
        data: (function(rowLimit){
          let res = [];
          for(let i = 0; i < rowLimit; i++){
            res.push({name: String(i)});
          }
          return res;
        })(this.state.rowLimit)
      })
    },1000);
    return;
    $.ajax({
      type: 'GET',
      url: 'getrecords.php',
      data: {
        show: this.state.rowLimit,
        pagenum: this.state.currentPage
      },
      cache: false,
      success: data =>  this.setState({data,loading: false}),
      error: jqXHR => {
        this.setState({loading:false});
        console.log(jqXHR);
      }
    });
  }

  componentDidUpdate(prevProps,prevState){
    if(this.state.currentPage != prevState.currentPage || this.state.rowLimit != prevState.rowLimit){
      this.updateData();
    }
  }

  componentDidMount(){
    this.updateData();
  }

  setCurrentPage(currentPage){
    this.setState({currentPage});
  }

  setRowLimit(rowLimit){
    this.setState({rowLimit})
  }

  renderLoading(){
    return <div>Loading ...</div>;
  }

  renderData(){
    return <div>
      {this.state.data.map(
         (item,key) => <DataItem item={item} key={key}/>
      )}
    </div>
  }

    render(){
        return (
      <div>
        <PageLink page={1} onClick={this.setCurrentPage}/>
        <RowSelector onChange={this.setRowLimit} selected={this.rowLimit}/>
        {this.state.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
    }
}

ReactDOM.render(
  <Pagination />,
  document.getElementById('react')
);

函数页面链接（{page，onClick}）{
返回
{page}
;
}
函数行选择器（{selected，onChange}）{
返回(
行数限制：
onChange（e.target.value）}value={selected}>
{[10,20,30].map（num=>{num}
)
}
函数数据项（{item}）{
//假设数据是带有名称键的映射。
返回{item.name}；
}
类分页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前页面：0，
行数限制：10，
数据：[]，
加载：错误
};
this.setCurrentPage=this.setCurrentPage.bind（this）；
this.setRowLimit=this.setRowLimit.bind（this）；
}
更新数据（）{
this.setState（{loading:true}）；
//这只是为了模拟的目的，删除它并使用下面的ajax逻辑。
设置超时（（）=>{
这是我的国家({
加载：false，
数据：（函数（行限制）{
设res=[]；
for（设i=0；ifunction PageLink({page,onClick}){
  return <div className="pageLink" onClick={onClick.bind(null,page)}>
    {page}
  </div>;
}

function RowSelector({selected,onChange}){
  return (
    <div className="rowSelector">
      <label>Rows Limit:</label>
      <select onChange={(e) => onChange(e.target.value)} value={selected}>
          {[10,20,30].map(num => <option key={num} value={num}>{num}</option>)}
      </select>
    </div>
  )
}

function DataItem({item}){
  // Assumes data is a map with a name key.
  return <div>{item.name}</div>;
}

class Pagination extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      currentPage: 0,
      rowLimit: 10,
      data: [],
      loading: false
    };
    this.setCurrentPage = this.setCurrentPage.bind(this);
    this.setRowLimit = this.setRowLimit.bind(this);
  }

  updateData(){
    this.setState({loading: true});
    // This is just for mock purposes, remove this and use the ajax logic below.
    setTimeout(() => {
      this.setState({
        loading: false,
        data: (function(rowLimit){
          let res = [];
          for(let i = 0; i < rowLimit; i++){
            res.push({name: String(i)});
          }
          return res;
        })(this.state.rowLimit)
      })
    },1000);
    return;
    $.ajax({
      type: 'GET',
      url: 'getrecords.php',
      data: {
        show: this.state.rowLimit,
        pagenum: this.state.currentPage
      },
      cache: false,
      success: data =>  this.setState({data,loading: false}),
      error: jqXHR => {
        this.setState({loading:false});
        console.log(jqXHR);
      }
    });
  }

  componentDidUpdate(prevProps,prevState){
    if(this.state.currentPage != prevState.currentPage || this.state.rowLimit != prevState.rowLimit){
      this.updateData();
    }
  }

  componentDidMount(){
    this.updateData();
  }

  setCurrentPage(currentPage){
    this.setState({currentPage});
  }

  setRowLimit(rowLimit){
    this.setState({rowLimit})
  }

  renderLoading(){
    return <div>Loading ...</div>;
  }

  renderData(){
    return <div>
      {this.state.data.map(
         (item,key) => <DataItem item={item} key={key}/>
      )}
    </div>
  }

    render(){
        return (
      <div>
        <PageLink page={1} onClick={this.setCurrentPage}/>
        <RowSelector onChange={this.setRowLimit} selected={this.rowLimit}/>
        {this.state.loading ? this.renderLoading() : this.renderData()}
      </div>
    );
    }
}

ReactDOM.render(
  <Pagination />,
  document.getElementById('react')
);