Question

你好，我是个新手，从React钩子开始。我对useState和useEffect挂钩有一些了解，但没有深入了解。我正在尝试使用[物料表] [1]和过滤器功能来切换过滤器状态的更改。我有适当的代码，使我可以切换defaultFilter值。但是，切换defaultFilter会重新加载表中的数据，包括是否已对其他值进行过滤。

我的最终目标是最终用户将过滤某些值，然后使用切换按钮显示活动/历史记录行。也许我使用useState的方式导致了重新渲染，而不仅仅是更新过滤器的值，或者我走的很远。我尝试了一些不同的方法，但是所有方法都导致状态被刷新。

任何帮助将不胜感激。

function handleFiltert() {
        if(filter == "Active") {
            setFilter(null); setButtontext("Hide Historical Data") }
        else {setFilter('Active'); setButtontext("Show Historical Data")}
        //console.log(buttontext)
    }

      const [filter, setFilter] = useState("Active")
      const [buttontext, setButtontext] = useState("Show Historical Data")  `

 <button type="button" onClick={handleFiltert}>
                {buttontext}
            </button>
           <MaterialTable

        columns={[
            { title: "Row Status", field: "ROWSTS", readonly: "true", defaultFilter: filter, defaultSort: "asc"},
            { title: "Programcd", field: "Programcd", readonly: "true"},
            { title: "Program Type", field: "programty", readonly: "true"  },

          ]}
          data={rows}
/>


  [1]: https://material-table.com/#/

更新状态而不会导致重新渲染

0 个答案: