reactjs - Reactjs Map 功能无法显示搜索记录
问题描述
Reactjs Map 功能无法显示搜索记录
相信我,我已经搜索过以前的帖子,但大多数解决方案都无法解决我的问题。
当用户在搜索文本框中键入数据时,下面的代码成功地以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>
解决方案
到目前为止,我最好的选择是实现过滤器功能并在 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>
)
)
}
谢谢
推荐阅读
- python - 训练准确率与类预测计算准确率之间的差异
- node.js - Mongodb database connection code breaks app
- php - Symfony 4错误“驱动程序中发生异常:找不到驱动程序”
- matlab - 等到用户按键
- mongodb - Mongoose:进行多个略有不同的更新的最佳/最快方式
- python - 输出列是函数,行是列的 Spark 聚合
- android - 尝试将旧的 Eclipse Android 项目导入 Android Studio
- typescript - 为什么 TypeScript 不报告这个打字错误?
- docker - 我在追鬼吗?muslc 环境中 glibc exe 中的动态链接库
- javascript - 在 TypeScript 中生成整数数组