Question

我有一张带过滤器的表。过滤器由 select 下拉菜单触发。我可以在控制台中看到列表已更新，但是，我没有看到屏幕上发生的变化

    // where the rows are rendered
    const renderAdvisors = map((advisor) => (
      <Row advisor={advisor} key={advisor.id} />
    ));
   // HOW I ORIGINALLY GET THE TABLE DATA - IS THE USEMEMO THE PROBLEM?
       const sortedAdvisors = useMemo(
    () => {
      ...
      ...
      
    },
    [arrayOrder, advisors]
  );

   // WHERE I GET MY UPDATED DATA AFTER THE FITLER (I CAN SEE THE NEW LIST IN CONSOLE
  const [filtered, setFiltered] = useState("ALL")
  
  // this useeffect causes a rerender so theoretically the new data would be rendered
  useEffect(() => { 
    filteredAdvisors = sortedAdvisors.filter(obj => obj.location === 
      filtered.toUpperCase());
    console.log('filtered advisors', filteredAdvisors, 'sortedadv', sortedAdvisors)
  },[filtered])
  
  // Below is wht changes the filter with usestate
  const onChangeFilter = (e) => {
    setFiltered(e.value)
  }
   
   return (
   ...
   ...
   // HERES WHERE I SWAP OUT THE LISTS AND AM EXPECTING A RE-RENDER BUT NONE OCCURS
    {advisors.length ?
    renderAdvisors(filteredAdvisors.length ? filteredAdvisors:sortedAdvisors)
    :
    <pw-body size="large" color="grey">Please enter a value</pw-body>
  }
  </tbody>
  ...
  )

Answer 1

解决了。感谢@Sinan Yaman

我不假思索地使用了常规变量而不是状态，所以没有发生更新。

Answer 2

为了清楚起见，我创建了一个 codesandbox。您可以开始输入“a”或“ab”来查看过滤器的工作原理。这里重要的是将变量存储在状态中，你已经解决了。

使用 useEffect 和 setState 更改状态后不重新渲染表数据

2 个答案: