筛选器函数返回未定义的

2024-05-19 • 问答

我的React应用程序通过api调用获取员工列表。对于部门组件，我具有类似的功能，该组件根据名称过滤掉部门。当我为员工执行类似的操作时，它们具有属性first_name和last_name。我得到了错误

TypeError: Cannot read property 'toLowerCase' of undefined

但是当我用console.log响应时，名称就没有问题了。

下面是我使用的useEffect钩子

 useEffect(() => {
    if (props.data !== undefined) {
      const results = props.data.filter(
        resp =>
          resp.first_name.toLowerCase().includes(filter) +
          " " +
          resp.last_name.toLowerCase().includes(filter)
      );
      setfilteredResults(results);
    }
  },[filter,props.data]);

我将过滤后的结果放入数组中的状态，然后在其上映射以显示

我想说，避免这种情况的最简单方法是先检查resp.first_name是否不为空，然后再调用toLowerCase函数。

您的过滤器功能应该看起来像这样，否则您将不返回布尔值而是一个字符串：

Error: Packets out of order. Got: 1 Expected: 0
    at Parser._tryReadPacketHeader (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/protocol/Parser.js:470:15)
    at Parser.write (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/protocol/Parser.js:33:29)
    at Protocol.write (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/protocol/Protocol.js:38:16)
    at Socket.<anonymous> (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/Connection.js:91:28)
    at Socket.<anonymous> (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/Connection.js:525:10)
    at Socket.emit (events.js:210:5)
    at addChunk (_stream_readable.js:308:12)
    at readableAddChunk (_stream_readable.js:289:11)
    at Socket.Readable.push (_stream_readable.js:223:10)
    at TCP.onStreamRead (internal/stream_base_commons.js:182:23)
    --------------------
    at Protocol._enqueue (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/protocol/Protocol.js:144:48)
    at Protocol.handshake (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/protocol/Protocol.js:51:23)
    at Connection.connect (/Users/gabrielraichart/Documents/tcv/node_modules/mysql/lib/Connection.js:119:18)
    at Object.<anonymous> (/Users/gabrielraichart/Documents/tcv/test.js:9:5)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'PROTOCOL_PACKETS_OUT_OF_ORDER',fatal: true

很难准确说明您要使用filter方法做什么，但是Array.prototype.filter接受一个回调，该回调在被调用时会强制转换为布尔值。如果该布尔值对于给定的数组元素为true，则该结果将包含在过滤列表中。如果为假，则不包括结果。

鉴于您返回的是非空字符串，所有结果都会显示出来；我认为这将使您更接近要执行的操作：

useEffect(() => {
    if (props.data !== undefined) {
      const results = props.data.filter(
        resp =>
          (resp.first_name && resp.first_name.toLowerCase().includes(filter))
          &&
          (resp.last_name && resp.last_name.toLowerCase().includes(filter))
      );
      setFilteredResults(results);
    }
  },[filter,props.data]);

在尝试访问它们之前，请使用简单的值/空值检查来确保在first_name上未定义last_name和resp。

筛选器函数返回未定义的

mxd_qd 回答：筛选器函数返回未定义的

大家都在问