this.state.records.filter(record => this.state.id == '' || record.id.includes(this.state.id))
.map(record=> (
<ProjectItem key={record.id} project={record} />
))
当我这样做时，我得到 TypeError: record.id.includes is not a function，includes is String func 但我的 record.id 无法识别
constructor(props){
super(props)
this.state={
records:[],
id:''
};
我正在从 axios.get() 获取记录 []
这意味着，records数组不为空，但不知何故id未定义。例如：
records = [
{ score: 4.5 },
...
];
或者：
records = [4.5, 5.5, ...]
解决方案是record.id在检查它是否包含之前检查 first 的有效性this.state.id，如下所示：
this.state.records.filter(record =>
this.state.id == '' || (record.id && record.id.includes(this.state.id))
);
更新： 如果以上仍然不起作用，那可能是因为您正在 IE 上测试它。includes在 IE 中不起作用，因此您可能想要使用 indexOf.
您已经使用了记录变量两次。首先在 filter 函数的外部块中，第二个在 map 函数的内部块中。因此编译器将无法识别要使用哪个记录变量并且会抛出错误。
您必须为 map 函数使用另一个变量，如下面的代码中使用的那样。
function ProjectItem(props) {
console.log("props => ",props)
return (
<div>
<h1>{props.project.id}</h1>
</div>
)
}
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
id:'a' ,
records: [
{id:"a"},
{id:"b"},
{id:"c"},
{id:"d"},
{id:"e"},
{id:"f"},
{id:"g"},
{id:"h"},
{id:"i"}
]
};
}
render() {
return (
<div>
{this.state.records.filter(record => this.state.id == '' || record.id.includes(this.state.id))
.map(rec => ( <ProjectItem key={rec.id} project={rec} />) )
}
</div>
)
}
}
ReactDOM.render(<Test />, document.querySelector("#app"))<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>首先includes()主要用于数组，在这里你在record.id上调用这个函数，我猜它是一个字符串，所以你应该使用record.id.contains(x)
其次，在 js 中，恒等 (===) 运算符的行为与相等 (==) 运算符相同，只是不进行类型转换，并且类型必须相同才能被视为相等。所以你应该在你的条件下使用身份运算符