每次状态更改时数据表组件都会重新呈现

Question

我已经使用 react-data-table-component 包创建了可重用的数据表组件。

    // these are the states I am using in the component
    // since parent component doesn't need to know about pages, total rows. I decided to 
    // define them inside the component and manage them from here. 

    const [data, setData] = useState([]);
    const [rows, setRows] = useState(10);
    const [totalRows, setTotalRows] = useState(0);
    const [page, setPage] = useState(1);


    useEffect(()=>{
       ApiService.createTransaction(data).then((response)=>{
        setData(response.data)
        setTotalRows(response.recordsFiltered);
        setPage(_page);
        props.setLoading(false);
      })
    },[])

我就是这样使用这个组件的

 <CustomDatatable {parameters}/>

问题是，在我收到响应并尝试设置状态数据后，每次设置任何状态时都会呈现组件。我怎样才能停止重新渲染。非常感谢任何帮助。

Answer 1

您可以使useEffect 依赖于变化的变量，方法是将该变量添加到依赖数组中，这是useEffect 的第二个参数。像这样：

    useEffect(()=>{
       ApiService.createTransaction(data).then((response)=>{
        setData(response.data)
        setTotalRows(response.recordsFiltered);
        setPage(_page);
        props.setLoading(false);
      })
    },[data])

现在useEffect 仅在data 更改时运行。您可以在该数组中添加其他内容以赋予它更多依赖关系。