Reactjs Map 功能无法显示搜索记录答案

【问题标题】：Reactjs Map function could not display search recordsReactjs Map 功能无法显示搜索记录
【发布时间】：2018-12-06 22:28:11
【问题描述】：

Reactjs地图功能无法显示搜索记录

相信我，我已经搜索过以前的帖子，但大多数解决方案都无法解决我的问题。

当用户在搜索文本框中键入数据时，以下代码成功地以 json 格式 显示从数据库中搜索到的记录如下图所示。

这是我的问题。搜索数据以 json 格式显示，如上面的屏幕截图所示。现在我想按照此代码使用 map() 方法/函数 显示搜索记录

<ul>
            {this.state.data.map((obj, i) => (
              <li key={i}>
                {obj.lastName} - {obj.firstName} -- {obj.id}



              </li>
            ))}
          </ul>

但它在下面显示错误

未捕获的类型错误：无法读取未定义的属性“地图” 在 NameForm.render 处。

在我看来，Map() 试图在页面加载时读取数据，但什么也没得到。有人可以帮助我解决任何可能的问题。

这是代码。

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
<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>

<label id="rootsearch"></label>

    <script type="text/babel">

class NameForm extends React.Component {


  constructor(props) {
    super(props);
 this.state = {value: ''};
this.state = {email: ''};
//this.state= {data: []}

    this.handleChange = this.handleChange.bind(this);
  }
 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  componentDidMount() {

$(".search").keyup(function() 
{
var email = this.state.email;
    $.ajax({
type: "POST",
url: "http://localhost/apidb_react/search_react3.php",

data: {

'email': this.state.email
},
cache: false,

       //dataType: 'json',
       //ContentType: 'application/json',
       success: function(data) {
         this.setState({data: data});
       }.bind(this),
       error: function(jqXHR) {
         console.log(jqXHR);
       }.bind(this)
    })
}.bind(this))// end search

  }



render() {
    return (
      <span>
        <label>
          <input placeholder="Search by Names" id="email" name="email" type="text" value={this.state.email} onChange={this.handleChange} />
        </label>


/*
          <ul>
            {this.state.data.map((obj, i) => (
              <li key={i}>
                {obj.lastName} - {obj.firstName} -- {obj.id}



              </li>
            ))}
          </ul>
*/



        {
         this.state.data

        }
      </span>
   );    
}



}
ReactDOM.render(
  <NameForm />,
  document.getElementById('rootsearch')
);


 </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


   </body>
</html>

【问题讨论】：

请参阅寻求调试帮助的问题下的stackoverflow.com/help/on-topic。
this.state.data 未定义。您的代码显示该行已被注释。

标签： reactjs

【解决方案1】：

在构造函数中试试这个

this.state = { data : [], value: “”, email: “”}

【讨论】：

谢谢佛朗哥。使用在 Map Array 方法中传递的过滤器函数内联实施您的解决方案，并将其作为第二种选择。谢谢
您的解决方案对我很有帮助，因为我忘记了 Map 函数只接受数组数据而不接受对象

【解决方案2】：

到目前为止，我最好的选择是实现 filter 函数 并在 Map Array 方法中传递它。我只是确保返回的数据是遵循 Coronel Franco 解决方案的数组。

// Coronel Franco Solutions
    this.state = { data : [], value: “”, email: “”}

// create filterRecord function
filterRecords(){
//parameter Lastname, firstname to be filter goes here
}

在渲染方法中我实现了下面的代码

{
     this.state.data.filter(this.filterRecords).map((obj, i) => 
          (
            <li key={i}>
              {obj.lastName} - {obj.firstName}  - {obj.id} 

             </li>
          )
      )
}

谢谢

【讨论】：