React过滤Json数组//TypeError：包含不是函数[重复]

Question

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() 获取记录[]

Answer 1

这意味着，records 数组不为空，但不知何故 id 未定义。例如：

records = [
  { score: 4.5 },
  ...
];

或者：

records = [4.5, 5.5, ...]

解决方案是先检查record.id 的有效性，然后再检查它是否包含this.state.id，如下所示：

this.state.records.filter(record =>
  this.state.id == '' || (record.id && record.id.includes(this.state.id))
);

更新： 如果上述方法仍然不起作用，可能是因为您正在 IE 上测试它。 includes 在 IE 中不起作用，因此您可能需要使用 indexOf。

Answer 2

您已经使用了两次记录变量。首先在 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>

Answer 3

首先includes()主要用于数组，在这里你在record.id上调用这个函数，我猜是一个字符串，所以你应该使用record.id.contains(x)

其次，在 js 中，标识 (===) 运算符的行为与相等 (==) 运算符的行为相同，只是没有进行类型转换，并且类型必须相同才能被视为相等。所以你应该在你的条件下使用身份运算符