如何将 JSON 对象从 React Native 发送到 Laravel 服务器？

Posted 2023-03-15

【中文标题】如何将 JSON 对象从 React Native 发送到 Laravel 服务器？

【英文标题】：How to send JSON Object from React Native to Laravel Server?

【发布时间】：2021-04-23 21:58:54

【问题描述】：

我有这些 JSON 对象想要发送到我的 API，以便我可以将它们保存在我的数据库中：

JSON 对象

const utility = 
    con: [
         "name": "Michel", "phone": "[phone]", "users_id": "1",
         "name": "Annie", "phone": "[phone]", "users_id": "1",
         "name": "Rory", "phone": "[phone]", "users_id": "1",
         "name": "CESI", "phone": "[phone]", "users_id": "1"
    ],
  

来自 React Native 的发布请求：

export default function Contact( navigation ) 
    const  user, logout  = useContext(AuthContext)
    const [contact, setContact] = useState([]);
    const [count, setCount] = useState('');
  
    //console.log(utility.con)
    const uticontact = utility.con;

    console.log(uticontact)

    const SubmitCon = async () => 
      axios.defaults.headers.common['Authorization'] = `Bearer $user.token`;
      try 
        axios.post(`/api/contact`, 
          data : JSON.stringify(utility.con)
        );
        console.log(`Contacts successfully added`);
       catch (err) 
        console.log(err);
      
    ;

当我使用函数提交时，我有一个 500 错误代码

Laravel 控制器：

public function store(Request $request)
    
        foreach ($request->json()->all() as $record) 
            $contact = new Contact();
            $contact->name = $record['name'];
            $contact->phone = $record['phone'];
            $contact->users_id = $record['users_id'];
            $contact->save();
        
        
        return response()->json([
            "code" => 200,
            "message" => "Contacts added successfully"
        ]);
    

当我尝试使用 Insomnia 发送此邮件时，它正在工作，我应该怎么做？

[
     "name": "Michel", "phone": "[phone]", "users_id": "1",
     "name": "Annie", "phone": "[phone]", "users_id": "1",
     "name": "Rory", "phone": "[phone]", "users_id": "1",
     "name": "CESI", "phone": "[phone]", "users_id": "1"
]

【参考方案1】：

通过 React-Native 中的 Fetch API 在相同或不同文件中创建服务 即service.js

const api_url  = "www.myUrl.com/"
export function submitContact(data) 
    return fetch(api_url+'/api/contact', 
        method: 'POST',
        headers : 
            'Accept' : 'application/json',
            'Content-Type' : 'application/json',
        ,
        body: JSON.stringify(data),
    );

然后导入并在你的组件中调用它

import  SubmitContact from './service'

export default function Contact( navigation ) 
    const  user, logout  = useContext(AuthContext)
    const [contact, setContact] = useState([]);
    const [count, setCount] = useState('');
  
    //console.log(utility.con)
    const uticontact = utility.con;

    console.log(uticontact)
      //Send Post Request 
      submitContact(utility.con).then((response) => response.json())
        .then((responseJson) => 
         // perform  some action  on  your  response

        ) ;
   
    ;