Reactjs 如何使用React Native和Axios发送表单数据？

我的代码很简单。我必须将表单数据发送到服务器。我的代币也在用。但我无法将表单数据作为数据发送。应该是：“输入”：“消息”，但这给了我一些非常复杂的东西。我的Axios看起来也不错，但我不确定

const Screen = ({ navigation }) => {
  const [formData, setFormData] = useState();    
    
  const onSubmit = async ({ formData }) => {
    let token = await AsyncStorage.getItem("token");
    const data = new FormData();
    data.append("input", { input: formData });

    axios
      .post(
        `http://example.com/api`,
        (data: data),
        {
          crossdomain: true,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true",
          },
        }
      )
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <View>
        <Input
          value={formData}
          onChangeText={setFormData}
          placeholder="Type something"
          onSubmitEditing={() => onSubmit({ formData })}
        />
    </View>
  );
};

export default Screen;

---

要像这样附加到formData，请执行以下操作：

data.append("input",formData);

您需要将标题

内容类型

作为

多部分/表单数据

发送，并使用axios发送表单数据，如下所示：

FormData {
  "_parts": Array [
    Array [
      "input",
      Object {
        "input": "Naber",
      },
    ],
  ],
}

axios.post("api",data,{
      headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true",
          }
})

axios.defaults.headers.common['Authorization'] =`Bearer ${token}`;

如果您在发送每个请求时都要发送授权标头，则可以使用“axios.defaults.headers.common”将其附加到所有axios

req标头

，如下所示：

FormData {
  "_parts": Array [
    Array [
      "input",
      Object {
        "input": "Naber",
      },
    ],
  ],
}

axios.post("api",data,{
      headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "multipart/form-data",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST",
            "Access-Control-Allow-Headers": "Content-Type, Authorization",
            "Access-Control-Allow-Credentials": "true",
          }
})

axios.defaults.headers.common['Authorization'] =`Bearer ${token}`;

---

使用RNFetchBlob而不是Axios！我也有同样的问题。Ops，它现在给出403错误。我想我无法正确发送令牌。很抱歉，我的坏消息没有注意到您错误地发送了带有请求的数据，请检查编辑的答案