Reactjs 为滑块指定值

好吧，这很奇怪。我的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));`

他们每个人都得到了应有的价值。问题是，在滑块上，如果我有值24,36,48，滑块会得到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;

这是我的滑块：

<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>

0 ? 4: 3 }
最小值={1}
步骤={1}
value={valuesFromApi.indexOf（value）}
onValueChange={index=>setValue（valuesFromApi[index]）}
/>
{A} 缅甸人
{B} 缅甸人
{C} 缅甸人
{D>0？{D}meses:null}
Su credito por:${A}MXN
Usted recibe:${A}MXN
一个没有价值的人：{Value}meses
苏帕戈：${A}.00 MXN

任何帮助都将不胜感激。

如果您只有API中的“24,36,48”，那么在这里：

const[termA，termB，termC，termD]=values.split（'，'）；

termD将是未定义的，哪个数字（termD）将返回NaN（不是数字）。我建议您为termD设置一个默认值，如：

setvD（termD的类型=='string'？数字（termD）：0）；//可以将0更改为您的首选值

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

---

更新：查看您的最小值（当前为1）。但是，在JS中，数组从0索引。所以从1到3的索引将是B，C和D。如果你将最小值更改为0，将最大值更改为D>0？3:2，你将得到正确的值

是的，现在我没有任何NaN数字，但现在滑块打印的是36,48，0而不是24,36,48。我不确定我的onchangevalue

value={valuesFromApi.indexOf（value）}onValueChange上是否存在问题={index=>setValue（valuesFromApi[index]）}

@user10625391我注意到了另一个问题并更新了我的答案，请看看

Value

和

index

的值是什么？您需要提供完整的代码。如果可能的话，创建一个最小的示例项目。Value的值是

const[Value，setValue]=useState（pterms[0])；

和pterms是字符串24,36,48

valuesFromApi.indexOf（Value）

将返回

0

如果匹配在索引0处，但您的

滑块的
最小值
是
1
？我尝试将其作为最小值A，但有一个错误，表示
不变冲突，输入范围必须是单调非递减的24,3
，如果D>0，则滑块的值为1,2,3和4，因此其没关系