TextInput 返回未定义。如何将 undefined 转换为 String()？答案

【问题标题】：TextInput is returning undefined. How to convert undefined to String()?TextInput 返回未定义。如何将 undefined 转换为 String()？
【发布时间】：2022-02-13 19:42:32
【问题描述】：

我正在使用 react native 进行 OTP 登录。 API 工作正常，我已经在React.js 上对其进行了测试。它工作正常。但是我在React Native 中实现它时遇到错误，TextField 正在返回未定义但我想要一个字符串。

这是来自后端的响应：

Object {
  "hash": "ffe9c1edd9362ac06cc3049287cb60c07484c494c8b9e8305524f57a4efedefc.1644744727322",
  "number": "undefined",
  "otp": 438014,
}

如您所见，该数字未定义。如何将其转换为String？

这是我的TextInput 代码：

import axios from "axios";
import React from "react";
import { Button, TextInput, View } from "react-native";

function NumberIn(props) {
  const { value, handleChange, hashHandleChange } = props;

  const Continue = (e) => {
    axios
      .post("http://172.20.10.4:9000/api/otp", {
        number: `${value.number}`,
      })
      .then((res) => {
        console.log(res.data);

        const hash = res.data.hash;
        hashHandleChange(hash);
      })
      .catch((err) => {
        console.log(err);
      });

    e.preventDefault();
    props.nextStep();
  };

  return (
    <View>
      <TextInput
        placeholder="enter Your Number"
        value={value.number}
        onChangeText={(text) => handleChange("number",text)}
      />
      <Button onPress={Continue} title="get otp"></Button>
    </View>
  );
}

export default NumberIn;

而我的SetForm 函数是：

import React, { useState } from "react";
import NumberIn from "./NumberIn";
import Otp from "./Otp";

function SetForm() {
  const [state, setState] = useState({
    number: "",
    hash: "",
    otp: "",
  });

  const [step, setStep] = useState(1);

  const handleChange = (input, inputText) => () => {
    setState({
      ...state,
      [input]: inputText,
    });
  };

  const hashHandleChange = (hash) => {
    setState({
      ...state,
      hash: hash,
    });
  };

  const nextStep = () => {
    setStep((prevStep) => prevStep + 1);
  };
  const prevStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  const { number, otp, hash } = state;
  const value = { number, hash, otp };
  switch (step) {
    case 1:
      return (
        <NumberIn
          nextStep={nextStep}
          hashHandleChange={hashHandleChange}
          handleChange={handleChange}
          value={value}
        />
      );
    case 2:
      return (
        <Otp
          nextStep={nextStep}
          prevStep={prevStep}
          handleChange={handleChange}
          value={value}
        />
      );
    default:
      return (
        <NumberIn
          nextStep={nextStep}
          hashHandleChange={hashHandleChange}
          handleChange={handleChange}
          value={value}
        />
      );
  }
}

export default SetForm;

【问题讨论】：

标签： node.js reactjs react-native axios

【解决方案1】：

请更改

  const handleChange = (input, inputText) => () => {
      setState({
        ...state,
        [input]: inputText,
      });
  };

到

  const handleChange = (input, inputText) => {
      setState({
        ...state,
        [input]: inputText,
      });
  };

【讨论】：