javascript - 在 React 中填充搜索栏之前，表格不会呈现

Question

我有一张我映射的数据表。我需要在页面呈现时可以查看所有可用数据，但是我当前设置的搜索功能仅呈现与输入匹配的表格单元格。如何让所有数据都存在，然后仅在使用搜索栏时过滤掉项目？

这是我的状态，也是我用来过滤的

  let [filter, setFilter] = useState();
  let [filteredResults, setFilteredResults] = useState([]);
  const handleChange = event => {
    setFilter(event.target.value);
  };

这是我用来进行实际过滤的 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]);

这是搜索栏的输入

     <input
           type="text"
            className="searchField"
            onChange={handleChange}
            value={filter || ""}
          />

最后是大坏表本身

 filteredResults.map(data => {
              return (
                <tr key={data.id}>
                  <td>
                    <div className="mobileBox">
                      {data.first_name !== ""
                        ? data.first_name + " " + data.last_name
                        : "--None--"}
                    </div>
                  </td>

                  <td className="normalView">
                    {props.departments.map(department => {
                      return department.id === data.default_department_id ? (
                        <div key={department.id}> {department.name}</div>
                      ) : (
                        ""
                      );
                    })}
                  </td>
                  <td className="normalView">
                    {data.status ? "Active" : "Disabled"}
                  </td>
                  <td>
                    <i
                      className="fas fa-pencil-alt"
                      onClick={() => handleEdit(data)}
                    ></i>
                  </td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>

任何帮助，将不胜感激

标签： javascriptarraysreactjssortingfilter