我在螢屏上有一個組件串列。每個組件對 useEffect 進行計算。我希望他們在完成每個計算后立即更新，但在所有計算完成后它們都會更新。
我做錯了什么？
組件示例：
import React, {useEffect, useState} from 'react';
import {View, Text} from 'react-native';
const Teste = () => {
const Item = props => {
const [tempo, setTempo] = useState('calculando...');
useEffect(() => {
const inicio = new Date();
const rdm = Math.random();
sleep(rdm * 1000 2000);
setTempo(`${new Date() - inicio} millisegundos`);
}, []);
const sleep = milliseconds => {
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
};
return (
<View style={{marginBottom: 20}}>
<Text>Item {props.nome}</Text>
<Text>Tempo - {tempo}</Text>
</View>
);
};
return (
<View style={{padding: 40}}>
<Item nome="1" />
<Item nome="2" />
<Item nome="3" />
</View>
);
};
export default Teste;uj5u.com熱心網友回復：
這里有兩個問題...
- 那個
sleep功能，我真的做不到 - 您已經在
Item組件內部定義了Teste組件，這意味著每當Teste渲染時，Item都會重新定義
我建議Item搬出Teste并使用基于承諾的睡眠
const sleep = (ms) => {
let timer;
const promise = new Promise(r => {
timer = setTimeout(r, ms);
});
return [ promise, () => { clearTimeout(timer); } ];
};
const Item = ({ nome }) => {
const [tempo, setTempo] = useState('calculando...');
useEffect(() => {
const inicio = new Date();
const rdm = Math.random();
const [ delay, cancel ] = sleep(rdm * 1000 2000);
delay.then(() => {
setTempo(`${new Date() - inicio} millisegundos`);
});
return cancel; // make sure timeout is cleared on unmount
}, []);
return (
<View style={{marginBottom: 20}}>
<Text>Item {nome}</Text>
<Text>Tempo - {tempo}</Text>
</View>
);
};
const Teste = () => (
<View style={{padding: 40}}>
<Item nome="1" />
<Item nome="2" />
<Item nome="3" />
</View>
);
這里sleep()回傳一個在超時到期后解決的承諾，以及一個在卸載組件時取消延遲的函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/451780.html
標籤：javascript 反应 反应式
上一篇：React-Native-當我關閉一個像messenger這樣的應用程式時，我怎么可能仍然可以收到來自其他人的來電通知