在 Reactjs 中使用 Props 初始化状态

Question

我有一个接收图像源数据集和初始索引的模态组件。 Modal 的每一侧都有导航箭头，可以增加或减少当前索引。 这是 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() ，等待点击事件后执行。

---

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

• React 反模式：初始状态的道具
• ReactJS：为什么将组件初始状态传递给一个反模式？