作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在尝试使用该函数时,我收到一个错误,如 Uncaught Error: Cannot add node 1 because a node with that id is already in the Store.
。
这是我的功能:
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [value, setValue] = useState(0);
const slides = ["one", "two", "thre"];
let size = slides.length;
useEffect(() => {
setValue(size);
}, [size]);
const prev = () => {
if (size && size < 1 && size && size > slides.length) return;
size--;
};
const next = () => {
if (size && size < 1 && size && size > slides.length) return;
size++;
};
return (
<div className="slider">
<a href="/" className="prev" onClick={prev}>
Previous
</a>
<h2>Barking Road, London {value}</h2>
<a href="/" className="next" onClick={next}>
Next
</a>
</div>
);
}
我想允许用户点击直到最小 1 和最大 3。但它不起作用。
最佳答案
useEffect
为此,还要更改您的 <a>
标记为 <button>
工作片段:
function App() {
const [value, setValue] = React.useState(1);
const slides = ["one", "two", "thre"];
const prev = () => {
if (value > 1) setValue(value - 1);
};
const next = () => {
if (value < slides.length) setValue(value + 1);
};
return (
<div className="slider">
<button className="prev" onClick={prev}>
Previous
</button>
<h2>Barking Road, London {value}</h2>
<button className="next" onClick={next}>
Next
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
关于reactjs - Uncaught Error : Cannot add node 1 because a node with that id is already in the Store,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69070889/
我是一名优秀的程序员,十分优秀!