React，useState：对象包含的数组变为undefined

Question

我有一个主页和一个在主页上使用的组件。在主页上，我有一个用 useState 声明的“filterData”对象：

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

})

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

这是我的 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(名称);

这部分看起来需要用 newArr.push 格式替换。

这可能是错误的，但我会post一个粗略的代码。

有没有办法测试一下？

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;

React，useState：对象包含的数组变为undefined

React, useState: The array contained in the object is changed to undefined

javascript

reactjs

use-state