多次响应提升状态以过滤组件

Question

组件关系图：

"Main"
|--"Side"--"CategoryPicker"
|
|--"ItemBoard"

categoryPicker获取选定的值。

    const filterResultHandler = (e) => {
    props.onFilterChange(e.target.value);}
    ...
    onChange={filterResultHandler}

并将该值提升到Side。

   const [filterState, setFilterState] = useState("all");    
   const onFilterChangeHandler = () => { props.onPassData(setFilterState);};

   ...

   <CategoryPicker selected={filterState} onFilterChange={onFilterChangeHandler} />

然后重复一遍，将值提升到Main。(到目前为止，我已经得到了console.log的值，而且它似乎还可以。)

  const [recData, setRecData] = useState("all");

  const onFilterChangeHandler = (passedData) => {
  setRecData(passedData);};

  <Side onPassData={onFilterChangeHandler} selected={recData} />

然后把它传递给Itemboard作为道具。

<ItemBoard items={items} recData={recData} />

在ItemBoard中，我尝试过滤数组，然后与以后的映射进行比较，并显示过滤过的组件。

 const filteredProducts = props.items.filter((product) => {
 return (product.cat.toString() === props.recData)})

 {filteredProducts.map((product, index) => (
 <Item cat={product.cat} />
 ))}

警告:不能在呈现不同组件(Main)时更新组件(Side)。在setState中定位坏的Main ()调用

我在哪里失去我的逻辑？PS。试着专注于理解提升和传递道具是如何工作的，而不是寻找更好的解决问题的方法。

Answer 1

在这段代码中使用了糟糕的setState：

const [recData, setRecData] = useState("all");
    
      const onFilterChangeHandler = (passedData) => {
      setRecData(passedData);};
    
      <Side onPassData={onFilterChangeHandler} selected={recData} />

为什么要将此selected={recData}数据再次传递给侧组件，您将从侧组件更新主组件的状态，并再次传递selected={recData}，删除此数据，然后重试。