React, useState:对象中包含的数组被更改为undefined

Question

我有一个主页和一个在主页上使用的组件。在主页上我有一个filterdata;用useState声明的对象:

const [filterData, setFilterData] = useState({
searchingPhrase: "",
categories: [],
priceRange: {
    minValue: null,
    maxValue: null,
}

})

我在prop组件中添加了filterData和setFilterData。如您所见，在组件中，我有一个函数用于检索搜索的名称和类别列表，当单击该列表时，它将从filterData.categories中输入/删除/进入。
input的值无缝地将字符串输入到filterData.searchingPhrase中。
处理filterData有一个问题。因为单击其中一个类别后的最终结果是将表转换为未定义。

这是我点击其中一个类别后的console.log:

/ * mycoponent.js * / Loading productfilter
/ * mycoponent.js * / imprtnt {searchingPhrase: '', categories: Array (0), priceRange: {…}}
/ * mycoponent.js * / imprtnt {searchingPhrase: '', categories: Array (0), priceRange: {…}}
/ * mycoponent.js * / imprtnt {searchingPhrase: '', categories: Array (0), priceRange: {…}}
/ * mycoponent.js * / imprtnt {searchingPhrase: '', categories: Array (0), priceRange: {…}}
/ * mycoponent.js * / imprtnt {searchingPhrase: '', categories: Array (0), priceRange: {…}}
/ * mainPage.js * / {searchingPhrase: '', categories: Array (1), priceRange: {…}}
/ * myComponent.js * / Loading productfilter
/ * myComponent.js * / imprtnt {searchingPhrase: '', categories: undefined, priceRange: {…}}
/ * myComponent.js * / imprtnt {searchingPhrase: '', categories: undefined, priceRange: {…}}
/ * myComponent.js * / imprtnt {searchingPhrase: '', categories: undefined, priceRange: {…}}
/ * myComponent.js * / imprtnt {searchingPhrase: '', categories: undefined, priceRange: {…}}
/ * myComponent.js * / imprtnt {searchingPhrase: '', categories: undefined, priceRange: {…}}

我想注意的是，类别被添加到数组中，但在组件似乎重新加载后，将数组替换为undefined。

主页中最重要的一段代码:

const instantWebsites = ({ navigation, products, allCategories }) => {
    const [filterData, setFilterData] = useState({
        searchingPhrase: "",
        categories: [],
        priceRange: {
            minValue: null,
            maxValue: null,
        }
    })
  return (
                        <ProductFilter 
                            allCategories={allCategories}
                            state={filterData}
                            setState={setFilterData}
                        />
  )
}

组件中最重要的代码:

const ProductFilter = ({allCategories, state, setState}) => {
    console.log('Loading productfilter')
    const handleSearchInput = (event) => { 
        const {value} = event.target
        setState({ 
            ...state, 
            searchingPhrase: value
        }) 
    }
    const handleClickCategory = (name) => {
        var label = document.querySelector(`#category-${name} h2`)
        var newArr;
        name = name.toLowerCase()
        const removeCategory = () => {
            wArr = state.categories.splice(state.categories.indexOf(name),1)
            //label.classList.remove(style.categoryLabel__active)
        }
        const addCategory = () => {
            var newArr = state.categories.push(name)
            label.classList.add(style.categoryLabel__active)
        }
        (state.categories.indexOf(name) >= 0) ? removeCategory() : addCategory() ;
        setState({
            ...state,
            categories: newArr
        })
        console.log(state)
    }
    return (
        <>
                <div className={style.filterContainer__content}>
                    <input
                        name="wordSearchInput"
                        value={state.searchingPhrase}
                        onChange={handleSearchInput}
                    />
                </div>
                <div className={style.filterContainer__cat}>
                    {allCategories.map( ({attributes, id}) => {
                        {console.log('imprtnt', state)}
                            if (attributes.products.data.length > 0) return (
                                <div id={"category-"+attributes.name} className={ style.filterContainer__cat__row }
                                    key={id}
                                    onClick={()=> handleClickCategory(attributes.name)}
                                >
                                <h2>{attributes.name}</h2><p>({attributes.products.data.length})</p>
                                </div>
                            )
                    } )}
                </div>
        </>
   )

Answer 1

var newArr = state.categories.push(name);

这个部件看起来需要换一个新的。把格式。

这可能是错误的，但我将发布一个粗略的代码。

有测试的方法吗?

const ProductFilter = ({ allCategories, state, setState }) => {
  console.log("Loading productfilter");
  //   memo hook change allCategories
  const allCate = useMemo(() => allCategories ?? [], [allCategories]);
  const handleSearchInput = useCallback(
    (event) => {
      const { value } = event.target;
      setState({
        ...state,
        searchingPhrase: value,
      });
    },
    [state, setState]
  );
  const handleClickCategory = useCallback(
    (name) => {
      var label = document.querySelector(`#category-${name} h2`);
      var newArr = [];
      name = name.toLowerCase();
      const removeCategory = () => {
        wArr = state.categories.splice(state.categories.indexOf(name), 1);
        //label.classList.remove(style.categoryLabel__active)
      };
      const addCategory = () => {
        newArr.pust(name)
        //  = state.categories.push(name);
        label.classList.add(style.categoryLabel__active);
      };
      state.categories.indexOf(name) >= 0 ? removeCategory() : addCategory();
      setState({
        ...state,
        categories: newArr ?? [],
      });
      console.log(state);
    },
    [state, setState]
  );
  return (
    <>
      <div className={style.filterContainer__content}>
        <input
          name="wordSearchInput"
          value={state.searchingPhrase}
          onChange={handleSearchInput}
        />
      </div>
      <div className={style.filterContainer__cat}>
        {(allCate ??[]).map(({ attributes, id }) => {
          {
            console.log("imprtnt", state);
          }
          if (attributes.products.data.length > 0)
            return (
              <div
                id={"category-" + attributes.name}
                className={style.filterContainer__cat__row}
                key={id}
                onClick={() => handleClickCategory(attributes.name)}
              >
                <h2>{attributes.name}</h2>
                <p>({attributes.products.data.length})</p>
              </div>
            );
        })}
      </div>
    </>
  );
};
export default ProductFilter;