使用可選值過濾對象數組

Question

我有一個對象數組，對象可以有可選的name值或subject值。

還有一個過濾器字符串。

我必須編寫過濾器函數，如果這些值之一包含這個字符串，它就會檢查。

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el =>
              el.subject
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) ||
              el.name
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
          );
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });

這就是我現在所擁有的。 我收到錯誤，例如Cannot read property "toLocaleLowerCase" of undefined ，因為我的元素有名稱或主題，我該如何避免這種情況？

Answer 1

你可以試試這個。

      const filterString = e.target.value.toLowerCase();
        if (filterString != "") {
          let filteredItemsList = this.state.itemsList.filter(
            el => {
              const inSubject = el.subject ?
                el.subject.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              const inName = el.name ?
                el.name.toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase()) : false;

              return inSubject || inName;
          });
          this.setState({
            itemsList: filteredItemsList,
            filter: e.target.value.toLocaleLowerCase()
          });

Answer 2

我認為向項目添加驗證可能會起作用

    const filterString = e.target.value && e.target.value.toLowerCase();
    if ( filterString ) {
        const { itemsList } = this.state;
        const filteredItemsList = [...filteredItemsList.filter(
                el => {
                  const inSubject = el.subject &&
                    el.subject.toLocaleLowerCase()
                    .includes(filterString);

                  const inName = el.name &&
                    el.name.toLocaleLowerCase()
                    .includes(filterString));

                  return inSubject || inName;
              })];

       this.setState({
            itemsList: filteredItemsList,
            filter: filterString
       });
    }

Answer 3

const filterString = e.target.value.toLowerCase();
if (filterString === '') return;
let filteredItemsList = this.state.itemsList.filter(
    el => [el.subject, el.name]
        .some(
            item => item && item
                .toLocaleLowerCase()
                .includes(e.target.value.toLocaleLowerCase())
        )
);
this.setState({
    itemsList: filteredItemsList,
    filter: e.target.value.toLocaleLowerCase(),
});