Question

我想用Laravel和Firebase在React中构建一个CRUD。使用文本时，一切都很完美，但是当我尝试将图像上传到Firebase Storage时遇到了麻烦。我可以保存它，但无法获取它的URL。

我写了2个“ console.log”。在第一个URL中，但是第二个URL（当我尝试从状态变量获取URL时）不返回任何内容。

handleSubmit = event =>{ 
  event.preventDefault();

  const {imagen} = this.state;
  if(imagen!=null){
      const uploadTask = storage.ref(`imagenes/${imagen.name}`).put(imagen);
      uploadTask.on('state_changed', 
      (snapshot) => {
        const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        this.setState({progress});
      }, 
      (error) => {
        console.log(error);
      }, 
    () => {
        storage.ref('imagenes').child(imagen.name).getDownloadURL().then(url => {
            this.setState({url});
            console.log(this.state.url); //<<<<<<<<<<<<<SHOW URL (IT'S OK!)
        })
    });
  }

var direccion = null;
const form = event.target;
let data = new FormData(form);
data.append('url', this.state.url);
console.log(this.state.url); //<<<<<<<DOESN'T SHOW URL !! (HERE'S THE TROUBLE)

如果要检查整个文件： https://github.com/AndresVasquezPUCE/project/blob/master/pelicula

我不是专业人士，所以请不要粗鲁：D

Answer 1

this.setState是异步的

如果要获取更新后的状态值，请添加回调并在其中访问新状态，如

this.setState({ url: 'some url'}, () => {
 conosle.log(this.state.url);
});

Answer 2

从Firebase异步加载数据。到您的console.log(this.state.url); //<<<<<<<DOESN'T SHOW URL !! (HERE'S THE TROUBLE)数据尚未从Firebase加载时，并且then尚未被调用。

任何需要Firebase数据的代码都必须位于then()回调内部（例如console.log(this.state.url); //<<<<<<<<<<<<<SHOW URL (IT'S OK!)）或从那里调用（例如this.setState({url})）。

状态变量的值丢失-反应

2 个答案: