Question

我正尝试通过 Reactjs 在搜索框中以用户类型显示数据库中的数据。如果在下面实现以下代码行

this.state = { data: [], value: '', email: ''};

它将不显示任何内容作为用户类型，并且没有错误消息。

但是我在下面实现了两行代码

this.state = {value: ''};
this.state = {email: ''};

它将在下面显示错误

VM1886：98未被捕获的TypeError：无法读取未定义的属性“ map” 在App.render处（评估为transform.run（browser.min.js：4），: 98:25）

这是要读取的json文件

[{"id":"1","firstName":"jmarkatte","lastName":"john"}, {"id":"2","firstName":"vicky","lastName":"shawn"}]

这是完整的代码

<!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>


<div id="app"></div>
<script type="text/babel">
var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});


class App extends React.Component {

/*
 constructor(){
    super() 
      this.state = {
        data: []
      }

  }
*/


  constructor(props) {
    super(props);

 this.state = {value: ''};
this.state = {email: ''};
//this.state = {data: []};

//this.state = { data: [], value: '', email: ''};

    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;


//alert(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) {

console.log(data);
         this.setState({data: data});

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

  }
  render() {

    return (

<div id='container'>

<label>
          <input placeholder="Search Group by email" id="email" name="email" type="text" value={this.state.email} onChange={this.handleChange} />
        </label>


{this.state.data.map(function(item, key) {

               return (



                  <li key = {key}>
                      {item.lastName}
                      {item.id}
                      {item.firstName}

                  </li>
                )

             })}

  </div>

    )
  }
}


ReactDOM.render(
    <MainBox />,
    document.querySelector("#app")
);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Answer 1

由于后端使用PHP，因此这是最适合我的解决方案。我确保将ajax调用中的数据类型设置为html

 dataType: 'html',

然后按照以下代码使用dangerouslySetInnerHTML()函数呈现记录

 {
         this.state.data ?
           <label dangerouslySetInnerHTML={{__html: this.state.data}} />
          : <label></label>
        }

使用上面的代码，每次我执行搜索时，应用程序都可以正常工作。谢谢

Reactjs搜索框未返回任何记录

1 个答案: