那是我需要从api获取值的方法,然后再加载滑块,这就是我所说的api
useEffect(() => {
async function BCcontroller() {
const vCreationUser = 6;
const vSolicitudeId = 8;
const { data } = await ForceApi.post(`/ConsultBCController.php`, {vSolicitudeId, vCreationUser});
const values = data.terms;
setpterms(data.terms);
//console.log(values);
const [termA, termB, termC, termD] = values.split(',');
setvA(Number(termA));
setvB(Number(termB));
setvC(Number(termC));
setvD(Number(termD));
// console.log(values);
}
BCcontroller();
}, );
这是滑块代码
<View style={{ alignItems: "stretch", justifyContent: "center" }}>
<Slider
maximumValue={D > 0 ? 4 : 3}
minimumValue={1}
step={1}
value={valuesFromApi.indexOf(Value)}
onValueChange={index => setValue(valuesFromApi[index])}
/>
<View style={styles.plazos}>
<Text style={styles.plazo1}>{A} meses</Text>
<Text style={styles.plazo2}>{B} meses</Text>
<Text style={styles.plazo3}>{C} meses</Text>
{D > 0 ? <Text style={styles.plazo3}>{D} meses</Text> : null}
</View>
<Text style={styles.slideText}>Su credito por: ${A}MXN</Text>
<Text style={styles.slideText}>Usted recibe: ${A}MXN</Text>
<Text style={styles.slideText}>A un plazo de: {sliderValue2} meses</Text>
<Text style={styles.PaymentText}>Su pago: ${A}.00 MXN</Text>
</View>
我是这样的,但是屏幕上加载了许多未定义的内容,然后它获取了api的值,所以我想首先获取这些值,然后呈现te组件
答案 0 :(得分:1)
您可能希望组件在没有数据时返回null
。只有当数据存在时,您才能返回view + Slider。
类似这样的东西:
const MyComponent = () => {
const [data, setDate] = useState();
useEffect(() => {
// ...
const { data } = await ForceApi.post(`/ConsultBCController.php`, {vSolicitudeId, vCreationUser});
setData(data)
// ...
}, [])
if (!data) return null;
return (
<View style={{ alignItems: "stretch", justifyContent: "center" }}>
// ...
</View>
)
}
当数据存在时,您调用setData,这将导致重新渲染,并返回View + Slider。
当然,上面的代码不完整且未经测试。目的是传达我的意图。如果不太合理,请发表评论,我会尝试进行增强。