我在屏幕上有一个组件列表。每个组件对 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;这里有两个问题...
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()返回一个在超时到期后解决的承诺，以及一个在卸载组件时取消延迟的函数。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句