如何知道呈现原因是react钩子函数中的属性更改还是状态更改

Question

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

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

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(请参阅文档(：

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上的第二个参数(数组内部(将在第一个参数的值发生变化时触发该函数。