[英]Reactjs Map function could not display search records
Reactjs Map函數無法顯示搜索記錄
相信我,我已經搜索了以前的帖子,但是大多數解決方案都無法解決我的問題。
當用戶在搜索文本框中鍵入數據時,下面的代碼成功以json格式成功顯示了從數據庫中搜索到的記錄,如下面的屏幕快照所示。
這是我的問題。 如上面的屏幕截圖所示,搜索數據以json格式顯示。 現在我想按照此代碼使用map()方法/函數顯示搜索記錄
<ul>
{this.state.data.map((obj, i) => (
<li key={i}>
{obj.lastName} - {obj.firstName} -- {obj.id}
</li>
))}
</ul>
但下面顯示錯誤
Uncaught TypeError:無法讀取NameForm.render上未定義的屬性“ map”。
在我看來,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>
在構造函數中嘗試一下
this.state = { data : [], value: “”, email: “”}
到目前為止,我最好的選擇是實現過濾器功能並將其傳遞到Map Array方法中。 我只是確保返回的數據是在此處遵循Coronel Franco解決方案的Array。
// Coronel Franco Solutions
this.state = { data : [], value: “”, email: “”}
// create filterRecord function
filterRecords(){
//parameter Lastname, firstname to be filter goes here
}
在render方法中,我實現了以下代碼
{
this.state.data.filter(this.filterRecords).map((obj, i) =>
(
<li key={i}>
{obj.lastName} - {obj.firstName} - {obj.id}
</li>
)
)
}
謝謝
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.