我怎么知道渲染原因是属性改变了还是反应钩子函数中的状态改变了？

Question

我有一个通过 React Hook 实现的显示组件。显示组件接收一组属性名为 'rows' 的记录。它有两个按钮用于显示上一个或下一个，所以我使用一个名为 'index' 的状态代表当前行号。

通过减少或增加状态'index'很容易显示prev/next。但是当它的行发生变化时，我希望将索引重置为零。如何在不保存行的副本以进行比较的情况下获得正确的条件？

interface row {
  id: number;
  name: string;
}
interface tableProps {
  rows: row[];
}
const Shower: React.FC<tableProps> = (props) => {
  const [index, setIndex] = useState<number>(0);
  // when should I reset the index to zero when receiving a new property rows?
  return <div>  
    <button disabled={!(index > 0)} onClick={() => setIndex(index - 1)}>Prev</button>
    <span>{props.rows[index].id}:{props.rows[index].name}</span>
    <button disabled={!(index + 1 < props.rows.length)} onClick={() => setIndex(index + 1)}>Prev</button>
  </div>;
}

Answer 1

您可以使用useEffect

......

import {useEffect} from 'react'
....

useEffect(()=>{
   setIndex(0)
},[props.rows])

Answer 2

在这种情况下，我建议您使用 useEffect（参见 docs）：

const Shower: React.FC<tableProps> = (props) => {
  const [index, setIndex] = useState<number>(0);

 useEffect(() => {
   setIndex(0)
 },[props.rows])

  // when should I reset the index to zero when receiving a new property rows?
  return <div>  
    <button disabled={!(index > 0)} onClick={() => setIndex(index - 1)}>Prev</button>
    <span>{props.rows[index].id}:{props.rows[index].name}</span>
    <button disabled={!(index + 1 < props.rows.length)} onClick={() => setIndex(index + 1)}>Prev</button>
  </div>;
}

Answer 3

您可以使用 useEffect，例如：

import React, { useEffect } from 'react';

const Shower = (props) => {
    const [index, setIndex] = useState<number>(0);

    useEffect(() => {
       setIndex(0)
    }, [props.rows.length]) 

     // ... rest of the code
    }
}

在上面的代码中，只要行的长度发生变化，它就会将索引重新设置为 0。当然，您可以使用任何变量，而不仅仅是 props.rows.length.

请记住，useEffect 上的第二个参数（数组内部）将在这些值更改时触发第一个参数上的函数。

我怎么知道渲染原因是属性改变了还是反应钩子函数中的状态改变了？

how can I know whether render reason is property changed or state changed in react hook function?

setstate

reactjs

react-hooks