我正在尝试创建一个事件监听器,它将数据提供给子组件。
我有两个状态
[data,setData]=useState([])
[playData,setPlayData]= useState([])
我使用带 [] 参数的 fetch 和 UseEffect 从 API 获取数据,以便仅在应用启动时使用它
fetch(API_URL)
.then(res=>res.json)
.then(data=>setData(data))
在 APP 组件中,我有一个接收 playData 的子组件和一个事件监听器函数
<Children data={playData} click={getDataOnClick} />
现在我希望这个事件监听器在单击时从数据作为 Prop 一个一个地发送数据,例如下一个下一个,下一个..直到数据耗尽
所以我所做的就是定义
const box = data
和使用
function getDataOnClick (event){
setPlaydata(prevdata=>{
return [...prevdata,box[prevdata.length+1]]
}}
我收到一个错误:当我尝试用其他数组方法将其标记出来时,box is not iterable or similar。我猜数组方法在遍历状态时不起作用??我该如何解决这个问题??我在这里缺少一个钩子(Hook)吗? Slice 也适用于状态和对象,我已经使它等于状态
最佳答案
您只需使用 prevdata.length
而不是 prevdata.length + 1
否则您将跳过一个元素。在推送更多内容之前,您可以检查 playData
是否包含 data
中的所有元素。
我创建了一个沙箱来执行您想要执行的操作。
function Child({ onNext, playData }) {
return (
<div>
<p>{playData}</p>
<button onClick={onNext}>Next</button>
</div>
);
}
export default function App() {
const [data, setData] = useState([]);
const [playData, setPlayData] = useState([]);
useEffect(() => {
const fakePromise = Promise.resolve(
Array(50)
.fill()
.map((_, i) => i)
);
(async () => {
setData(await fakePromise);
})();
}, []);
const onNext = () => {
setPlayData((prev) =>
data.length === prev.length ? prev : [...prev, data[prev.length]]
);
};
return (
<div className="App">
<Child playData={playData} onNext={onNext} />
</div>
);
}
关于javascript - react 状态之间的索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70849087/