在这里，我尝试进行 crud 操作。一切正常，直到我尝试通过其 id 更新某些内容时，它才显示此错误。对于我所附屏幕截图中的第一个，我可以更新数据，但当我尝试更新另一个时，它会在 selectVendor 函数中显示此错误。

#这是我的代码

   import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import axios from 'axios'
import { Link } from 'react-router-dom'
import { Form, Button, Table } from 'react-bootstrap'
import Loader from '../components/Loader'
import Message from '../components/Message'
import Paginate from '../components/Paginate'

function VendorScreen() {
    const [vendors, setVendor] = useState([])
    const [name, setName] = useState("");
    const [userName, setUserName] = useState("");
    const [address, setAddress] = useState("");
    const [profile_picture, setPicture] = useState("");
    const [vendorId,setVendorId]=useState(null)
    const [uploading, setUploading] = useState(false)
    

    const userLogin = useSelector(state => state.userLogin)
    const { userInfo } = userLogin
  
    useEffect(() => {
      getVendors();
    }, [])
    function getVendors() {
      fetch("http://localhost:8000/api/orders/vendors/",{
      method: 'GET',
        headers:{
          'Accept':'application/json',
          'Content-Type':'application/json',
          "Authorization" : `Bearer ${userInfo.token}`,
        },}).then((result) => {
          
          
        result.json().then((resp) => {
          console.warn(resp)
          setVendor(resp)
          setName(resp[0].name)
          setAddress(resp[0].address)
          setVendorId(resp[0].id)
          setPicture(resp[0].profile_picture)
          setUserName(resp[0].user.name)
        })
      })
    }
  
    function deleteVendor(id) {
      fetch(`http://localhost:8000/api/orders/delete/${id}`, {
        method: 'DELETE',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json',
            "Authorization" : `Bearer ${userInfo.token}`,
        }
      }).then((result) => {
        result.json().then((resp) => {
          console.warn(resp)
          getVendors()
        })
      })
    }

    
    function selectVendor(id) {
      const item = vendors.find(vendor => vendor.id === id);
    
      console.log(item);
    
      if (item) {
        setName(item.name);
        setAddress(item.address);
        setPicture(item.profile_picture);
        setUserName(item.user?.name); // <-- guard if user is undefined/null
        setVendorId(item.id);

      }
    }


    function updateVendor()
    {
      const formData = new FormData();

          formData.append('File', profile_picture);

      let item={name,address, profile_picture}

      console.warn("item",item)
      fetch(`http://localhost:8000/api/orders/update/${vendorId}`, {
        method: 'PUT',
        headers:{
          'Accept':'application/json',
          'Content-Type':'application/json',
          "Authorization" : `Bearer ${userInfo.token}`,
        },
        body:JSON.stringify(item)
      }).then((result) => {
        result.json().then((resp) => {
          console.warn(resp)
          getVendors()
        })
      })
    }


    const uploadFileHandler = async (e) => {
      const file = e.target.files[0]
      const formData = new FormData()

      formData.append('profile_picture', file)
      formData.append('vendor_id', vendorId)

      setUploading(true)

      try {
          const config = {
              headers: {
                  'Content-Type': 'multipart/form-data',
                  "Authorization" : `Bearer ${userInfo.token}`,
              }
          }

          const { data } = await axios.post('/api/products/upload/vendor/', formData, config)


          setPicture(data)
          setUploading(false)

      } catch (error) {
          setUploading(false)
      }
  }

    return (
      <div className="App">
        <h1>Update User Data With API </h1>
        <Table striped bordered hover responsive className='table-sm'>
          <tbody>
            <tr>
              <td>ID</td>
              <td>Name</td>
              <td>Address</td>
              <td>User</td>
              <td>Picture</td>
              <th></th>
              
            </tr>
            {
              vendors.map((item, i) =>
                <tr key={i}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  
                  <td>{item.address}</td>
                  <td>{item.user.name}</td>
                  <td>{item.profile_picture}</td>
                  <td><button variant='danger' className='btn-sm' onClick={() => deleteVendor(item.id)}><i className='fas fa-trash'></i></button>
                  <button variant='info' className='btn-sm' onClick={() => selectVendor(item.id)}><i className='fas fa-edit'></i></button></td>
  
                </tr>
              )
            }
          </tbody>
          </Table>
          <Paginate pages={pages} page={page} isAdmin={true} />
        <div>

            <br ></br>
            <br ></br>
            <br ></br>
            <br ></br>
        <input type="text" value={name} onChange={(e)=>{setName(e.target.value)}} /> <br /><br />
          <input type="text" value={address} onChange={(e)=>{setAddress(e.target.value)}}  /> <br /><br />
          <Form.Control
                                    type='file'
                                    id='image-file'
                                    label='Choose File'
                                    custom
                                    onChange={uploadFileHandler}
                                >

                                </Form.Control>
                                {uploading && <Loader />}
        
           <button onClick={updateVendor} >Update User</button>  
        </div>
      </div>
    );
  }

export default VendorScreen

我需要为 getbyId 调用 api 吗？我按照教程操作，他们可以做到这一点，但我不知道如何操作

这是我的屏幕截图