javascript - 无法将对象作为道具传递？

Question

目标：我正在尝试将selectedFile（我从计算机上传的 .png 或 .jpeg）作为道具传递给我的 Canvas 组件（Canvascompo）。即使selectedFile在当前组件中渲染并且显示上传的图像没有问题，但当我将它作为道具传递给CanvasComponent.

import React,{Component} from 'react';
import {Link } from 'react-router-dom';
import Canvascompo from "./CanvasComponent"
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem } from 'reactstrap';

constructor(props) {
    super(props)
    this.state = {
        facesArray: [], // I am able to pass this as props to Canvascompo
        selectedFile: null, //unable to pass through as props to Canvascompo. comes out as undefined
        img: null

    }
    this.handleChange = this.handleChange.bind(this);
    // this.handleSubmit = this.handleSubmit.bind(this);

}

这是我尝试将对象作为道具发送的地方：我newlist在我的渲染函数中定义。

console.log("selected file before update is" , this.state.selectedfile); //undefined
console.log("faces array is ", this.state.facesArray) //works fine
let newlist = this.state.facesArray.map((face, i) => {
    return <Canvascompo faces={face} originalimage={this.state.selectedfile} ivalue={i} key = {i}/>
});

结果：faces 数组返回一个填充数组（没问题），但是，原始图像在Canvascomponent.

到目前为止我已经尝试过：

1. 我知道这setState是异步的，所以我尝试创建一个回调，以便它立即设置状态

    let url1 = URL.createObjectURL(event.target.files[0]);
    // this.setState({selectedFile: url1}, function() {
    //     console.log("inside callback 1", this.state.selectedFile); // returns blob:http://localhost:3000/2be42315-d2b5-4729-b5b0-99c7a84de5ff
    //     this.forceUpdate();
   
    // });
   
    this.setState({selectedFile: url1}, function() {
        console.log("did it work 2", this.state.selectedFile); // returns blob:http://localhost:3000/2be42315-d2b5-4729-b5b0-99c7a84de5ff
   
   
        <Canvascompo originalimage={this.state.selectedfile} />
    });
    console.log("selected File after callback is", this.state.selectedFile) // null
   

2. setState在我的 fetch API 中，我对我的（有效）使用了一个承诺，facesArray所以我决定为selectedFile

    .then((response) => response.json()).then(success => {
    that.setState({selectedFile: url1});
   
            that.setState({facesArray: success});
            console.log("facesArray is", that.state.facesArray);
            console.log("new selected state is", that.state.selectedFile); // blob:http://localhost:3000/2be42315-d2b5-4729-b5b0-99c7a84de5ff
            // console.log(success);
        }).catch(error =>
            console.log("did not work ",error))
    };
   

3. 用于ComponentDidUpdate检查selectedFile实际更新（确实如此）。

    componentDidUpdate() {
        console.log("selected file in CDU is ", this.state.selectedFile); //blob:http://localhost:3000/2be42315-d2b5-4729-b5b0-99c7a84de5ff
    }
   

最后说明：我的想法是在我创建之前的这两行newlist

    console.log("selected file before update is" , this.state.selectedfile); //undefined
    console.log("faces array is ", this.state.facesArray) //works fine
    let newlist = this.state.facesArray.map((face, i) => {
        return <Canvascompo faces={face} originalimage={this.state.selectedfile} ivalue={i} key ={i}/>
    });

我需要selectedFile正确打印它的结果。这就是为什么我一直在尝试立即setState selectedFile，虽然它在回调中起作用，但它不会在setState之后永久存在，因为它仍然是未定义的。

标签： javascriptreactjsreact-props