reactjs - 为 slider 指定值

Question

好吧，这很奇怪。我的 API 应该抛出字符串“24,36,48” - 事实上它确实如此，我的变量被分配了该值。我需要将它分成三个部分:A、B、C(有时它有四个值 - 这就是我有变量 D 的原因)。所以，我像这样分割字符串

 `const [termA, termB, termC, termD] = values.split(',');
      setvA(Number(termA));
      setvB(Number(termB));
      setvC(Number(termC));
      setvD(Number(termD));`

并且他们中的每一个都得到了它应该得到的值(value)。问题是，在 slider 上，如果我有值 24,36,48， slider 将得到 36,48,NaN。

下面是我的完整代码。

这是 API 调用:

  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 = [ A,B,C,D];
  const [Value, setValue] = useState(pterms[A]);
  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();
}, );

if (!A) return null;

这是我的 slider :

<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:  {Value} meses</Text>

                <Text style={styles.PaymentText}>Su pago: ${A}.00 MXN</Text>
              </View>

如有任何帮助，我们将不胜感激。

Answer 1

如果您只有来自 API 的“24,36,48”，则在此处:

const [termA, termB, termC, termD] = values.split(',');

termD 将是未定义的，其中 Number(termD) 将返回 NaN(不是数字)。我建议您应该为 termD 设置一个默认值，例如:

setvD(typeof termD === 'string' ? Number(termD) : 0); // 0 can be changed to your preferred value

此外，当 D 现在为 NaN 时，比较 D > 0 将始终为 false，这使得最大值为 3

更新:查看最小值(当前为 1)。然而，JS 中的数组索引是从 0 开始的。因此从 1 到 3 的索引将是 B、C 和 D。如果将最小值更改为 0，将最大值更改为 D>0?3:2，您将得到正确的值