使用Reactjs中的Props初始化状态

Question

我有一个Modal组件，它接收图像源和初始索引的数据集。模态的每一侧都有导航箭头，可以递增或递减当前索引。这是模态组件的简化版本：

function Modal({ index, data, onClose, show }) {
const [currIndex, setCurrIndex] = useState(index);
return (
<main className={show ? "Modal Open" : "Modal"}>
<img src={data[currIndex].link} alt="ModalImage" />
<IconContext.Provider value={{ className: "Arrows" }} >
{currIndex < data.length - 1 && (<AiOutlineRight className="ArrowNext" onClick={() => setCurrIndex(currIndex + 1)} />)}
{currIndex > 0 && (<AiOutlineLeft className="ArrowLast" onClick={setCurrIndex(currIndex - 1)} />)}
</IconContext.Provider>
<div className="ModalBackground" onClick={onClose} />
</main>
}
export default Modal;

我是这样使用它的：

<Modal show={show} onClose={() => setShow(false)} data={filterData()} index={modalIndex} ></Modal>

这一定是不好的做法，因为它不起作用。状态最初总是0，当我递增或递减时从不更新。它会立即重置为0。该状态停留在0。props值被正确地传递，其他一切都无法作为初始状态工作。有没有其他方法可以根据另一个组件中的选择在模态中设置初始状态？

Answer 1

对于AiOutlineLeft和AiOutlineRight，在onClick内部，而不是：

onClick={setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other one

应该是：

onClick={() => setCurrIndex(prevIndex => prevIndex + 1)} // -1 for the other one

在第一种情况下，当组件被挂载时，setCurrIndex将立即执行，因为它是一个函数调用：fn()。

在第二种情况下，箭头函数将仅在单击时执行，因为它是一个函数声明：()=> fn()，在单击事件后等待执行。

---

注意事项：使用props作为状态的初始值时要非常小心。阅读以下资源，了解可能被视为反模式并应避免的情况：

• 反应反模式：道具处于初始状态
• ReactJS：为什么传递组件初始状态是一个道具反模式