javascript - 映射对象抛出错误 "TypeError: Cannot read property ' 状态'未定义”

Question

我有一个基本的映射函数，它只是从数据库中进行基本的获取。我想做的就是获取后将其全部显示到屏幕上。

这是我收到的错误

×
TypeError: Cannot read property 'state' of undefined
(anonymous function)
C:/Users/Henry Peters/Codestone%20Workstation%20Self-Assessment%20Portal%202/src/Components/PageDetails/CompletedAssessments/CompletedAssessments.js:211
  208 |       return (
  209 |         <div >
  210 |             
> 211 | <li> {this.state.selectedSet.RUId}</li>
      | ^  212 | <li> <b>{this.state.selectedSet.QuestionId}</b></li> 
  213 | 
  214 |         </div>

这是我的类(class)

class Questions extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = { ...props,  };
    this.checker = this.checker.bind(this)
}

checker( ){
    this.setState({viewDetails : true})
    let workStation = window.localStorage.getItem("Workstation")
    let date = this.state.questions.Date
    let email = window.localStorage.getItem("User")

    fetch(`/show-questions-answered/${date}/${workStation}/${email}`)
    .then(recordset => recordset.json())
    .then(results => {
      this.setState({ selectedSet: results.recordset });
      console.log(this.state.selectedSet)   
    });
  alert(`${date} this is the boolena ${this.state.viewDetails}`)
}

  render() {
     console.log(`${this.state.previousDate} PREVIOUS DATE ${this.state.questions.Date}  DATE`)  

      if (!this.state.viewDetails){
      return (
          <div  >
          <button onClick = {this.checker}className= "btn btn-primary" style = {{float : "right"}}>View Details</button>

          <br />

          <li>  {this.state.questions.Date }</li>

        </div>
      );}
      else{
        return(<div  >
          <button onClick = {this.checker}className= "btn btn-primary" style = {{float : "right"}}>View Details</button>

          <br />

          <li>  {this.state.questions.Date }</li>
          <h3>BUTTON ClIcKED</h3>


          {this.state.selectedSet &&
              this.state.selectedSet.map(function( index) { 
                return (
                  <div >

          <li> {this.state.selectedSet.RUId}</li>
          <li> <b>{this.state.selectedSet.QuestionId}</b></li> 

                  </div>
                );
              })} 

        </div>

        )
      }

}}

console.log(this.state.selectedSet)  

确实有效并提供信息和包含的数据库表名称，例如 RUId、questionId 等

所以 this.state.selectedSet.QuestionId 应该可以工作

Answer 1

更改此代码:

{this.state.selectedSet &&
    this.state.selectedSet.map(function(index) {
        return (
            <div>
               <li>{this.state.selectedSet.RUId}</li>
               <li><b>{this.state.selectedSet.QuestionId}</b></li>
            </div>
        );
    })
}

对此:

{this.state.selectedSet &&
    this.state.selectedSet.map((item, index) => {
        return (
            <div>
               <li>{item.RUId}</li>
               <li><b>{item.QuestionId}</b></li>
            </div>
         );
    })
}