Javascript TypeError:无法读取属性'；路径'；未定义React JS的定义

我正在React to

this.props.file[0].path中设置img的src，但此状态尚未设置，因此我得到了
TypeError:无法读取未定义的属性“path”。我设置状态和获取
文件[0].path
的方法是将
事件.target.files[0]
的状态添加并发布到我的服务器，然后将服务器请求中的
req.file.path
添加到我的数据库中。然后，我使用
req.params.id
将相册id从
componentDidMount（）
中的数据库中提取数据，并将数据添加到我的状态。然后我将状态发送到ImageUpload组件，然后使用它设置img的src。我想知道如果该州还没有设置数据，我该怎么办

图像上传组件

<input type="file" accept="image/*" onChange={this.props.onChange} />

<img style={{ width: "300px", height: "300px"}} src={"http://localhost:3000/" + this.props.file[0].path} />

    this.state = {
          file: null,
        };

componentDidMount() {
  const { match: { params} } = this.props;
    fetch(`http://localhost:3000/albums/${params.albumId}/images`)
    .then((response) =>
      response.json())
    .then((data) => {
          console.log(data)
          this.setState({ file : data });
          console.log(this.state.file)
        }).catch((error) => {
            console.log("Error " + error)
          })

}

    onChange(event) {
        this.setState({
          file: event.target.files[0],
          loaded: 0,
        });
      }

   onClickHandler = () => {
    const { match: { params} } = this.props;
    const data = new FormData()
    data.append('file', this.state.file)
    axios.post(`http://localhost:3000/albums/${params.albumId}/upload`, data, {

    }).then(res => {
      console.log(res.statusText)
    })
  }

节点JS-image upload.JS

const db = require('./queries');

const getImageByAlbumId = (request, response) => {
  const { id }  = request.params;

  db.pool.query('SELECT * FROM file WHERE album_id = $1 ORDER BY album_id ASC', [id], (error, results) => {
    if (error) {
      throw error
    } else {
    response.status(200).json(results.rows)
   }
  })
}


const imageUpload = (req, res) => {
    var id = parseInt(req.params.id);
    message: "Error! in image upload."
     if (!req.file) {
          console.log("No file recieved");
          message = "Error! in image upload."
          console.log("status: danger");
     } else {
        console.log('file recieved');
        console.log(req.file);

         var query = db.pool.query('INSERT INTO file (name, type, size, path, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id) DO NOTHING RETURNING *', [req.file.filename, req.file.mimetype, req.file.size, req.file.path, id], (err, result) => {
            console.log('inserted data')
            if (err) {
                console.log(err)
            } else {
               console.log('inserted data')
               console.log(result)
         }
         });
         message = "Successfully uploaded";
         console.log("status: success");
     }

}

var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public')
    }, 
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' +file.originalname)
    }
})
app.use('/public', express.static('public'));

var upload = multer({ storage: storage });
app.use(upload.single('file'));

app.get('/albums/:id/images', image.getImageByAlbumId)
app.post('/albums/:id/upload', image.imageUpload);

NodeJS-index.js

const db = require('./queries');

const getImageByAlbumId = (request, response) => {
  const { id }  = request.params;

  db.pool.query('SELECT * FROM file WHERE album_id = $1 ORDER BY album_id ASC', [id], (error, results) => {
    if (error) {
      throw error
    } else {
    response.status(200).json(results.rows)
   }
  })
}


const imageUpload = (req, res) => {
    var id = parseInt(req.params.id);
    message: "Error! in image upload."
     if (!req.file) {
          console.log("No file recieved");
          message = "Error! in image upload."
          console.log("status: danger");
     } else {
        console.log('file recieved');
        console.log(req.file);

         var query = db.pool.query('INSERT INTO file (name, type, size, path, album_id) VALUES ($1, $2, $3, $4, $5) ON CONFLICT (album_id) DO NOTHING RETURNING *', [req.file.filename, req.file.mimetype, req.file.size, req.file.path, id], (err, result) => {
            console.log('inserted data')
            if (err) {
                console.log(err)
            } else {
               console.log('inserted data')
               console.log(result)
         }
         });
         message = "Successfully uploaded";
         console.log("status: success");
     }

}

var storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public')
    }, 
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' +file.originalname)
    }
})
app.use('/public', express.static('public'));

var upload = multer({ storage: storage });
app.use(upload.single('file'));

app.get('/albums/:id/images', image.getImageByAlbumId)
app.post('/albums/:id/upload', image.imageUpload);

您可以使用本地占位符图像，也可以显示加载指示器。
然后检查是否定义了
此.props.file[0]
，并决定显示哪一个。
src={this.props.file[0]？”http://localhost:3000/“+this.props.file[0]。路径：'path/to/placeholder/或/loading/indicator'}
您可以在状态更新之前阻止内容呈现。看

在这种情况下

{ this.props.file !== undefined ? (
    <img style={{ width: "300px", height: "300px"}} src={"http://localhost:3000/" this.props.file[0].path} />
) : (
    <div>Placeholder content</div>
)}

{this.props.file！==未定义(
) : (
占位符内容
)}