时间戳

首页 > 解决方案 > 从字符串转换为数组反应原生

javascript - 从字符串转换为数组反应原生

问题描述

我从 api [10, 20, 22, 26] 得到这个字符串。这些值被分配给 [A, B, C, D] 并且我有一个具有这些值 [1, 2, 3 ,4] 的滑块。我需要的是当您在滑块中选择 1 时，它会为您提供 A 的值（在本例中为 10）。如果您在滑块中选择 2，它应该为您提供 B 的值（即 20），依此类推。当我模拟数据时我可以这样做，const valuesFromApi = [ 10,20, 22];但我不能对来自我的 api 的数据做同样的事情，我想那是因为它是一个字符串而不是数组。

这是我的代码

    const Calculadora = ({navigation}) => {
  const [sliderValue, setsliderValue] = useState();
  const [sliderValue2, setsliderValue2] = useState(A);
  const [A, setvA] = useState();
  const [B, setvB] = useState();
  const [C, setvC] = useState();
  const [D, setvD] = useState();
  const [pterms, setpterms] = useState([]);
  const valuesFromApi = [ 10,20, 22];
  const [value, setValue] = useState(valuesFromApi[0]);

这就是我从 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(setpterms);
            const [termA, termB, termC, termD] = values.split(',');
            setvA(Number(termA));
            setvB(Number(termB));
            setvC(Number(termC));
            setvD(Number(termD));
    }
    BCcontroller();
}, []);

这是我的滑块

<View style={{alignItems: 'stretch', justifyContent: 'center' }}>
                        <Slider 
                            maximumValue={D > 0 ? 4: 3 }
                            minimumValue={1}
                            step={1}
                            value={pterms.indexOf(value)}
                            onValueChange={index => setValue(pterms[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>

任何帮助者将不胜感激

标签： javascriptreactjsreact-native

解决方案

在我看来，您正试图在数据到达之前使用它，您会使用类似的东西：

useEffect(() => { 
       const    vCreationUser = 6,
                vSolicitudeId = 8
       ForceApi.post(`/ConsultBCController.php`, {vSolicitudeId, vCreationUser}).then(data => {
            const   values = data.terms,
                    [termA, termB, termC, termD] = values
            setpterms(values)
            setvA(Number(termA))
            setvB(Number(termB))
            setvC(Number(termC))
            setvD(Number(termD))
       })
    }, [])

JSON.parse()如果您的 API 响应结构不正确，您可以将其与以下内容结合使用：

const   values = JSON.parse(data.terms),

推荐阅读