对更改检查是否等于对象数组做出反应

Question

我有输入和我需要的对象数组，当我输入它会显示该对象。 “airplaneCompany”是我需要比较的对象属性，只有当输入等于“airplaneCompany”时，它才会通过过滤器方法返回它，但我需要 evrey char，它会检查它，如果对象以"a" 它将显示这个对象

  const [txtInp, setTxtInp] = useState("");
  const showFlight = users.filter((user) => {
    return user.airplaneCompany == txtInp;
  });

     {showFlight.map((user, index) => {
        const { id, airplaneCompany, passenger } = user;
        return (
          <div className="flightContainer" key={index}>
            <div>{id}</div>
            <div>{airplaneCompany}</div>
            <div>{passenger}</div>
          </div>
        );
      })}

Answer 1

我认为您可以使用 .filter 函数来检查飞机公司是否从用户输入开始？

就像是

返回 user.airplaneCompany.indexOf(txtInp) === 0;

Answer 2

您可以使用@Patrick 答案，但 JavaScript 有自己的startsWith函数可以使用。

此外，请考虑使用useMemo挂钩包装过滤器，以便仅在输入更改时运行它，而不是在每次渲染时运行。

const showFlight = useMemo(() => {
  return users.filter((user) => {
    return user.airplaneCompany == txtInp;
  });
}, [txtInp]);

Answer 3

只需使用正则表达式。 只需放置输入值，例如/^airplaneCompany$/

 const wrongInputText = 'q' const rightInputText = 'airplaneCompany' console.log('wrong', 'return value=', /^airplaneCompany$/.test(wrongInputText)) console.log('right', 'return value=',/^airplaneCompany$/.test(rightInputText))