Блог

У меня возникла проблема с возможностью передачи значения от родительского к дочернему функциональному компоненту.

Проблема в том, что this.state.dataURL не определен при передаче дочернему элементу, но я не могу понять, почему.

Я пробовал консольные реквизиты для регистрации в конструкторе, и это также не определено

Родительский:

 import UploadButton from './Components/UploadButton';
import previewTable from './Components/PreviewTable';


default export class uploadDataPage extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = { dataURL: 'default value' };
    this.changeData = this.changeData.bind(this);
  }
  
 
 changeData(newValue) {
     this.setState({dataURL : newValue});
    }


  render() {
    return (
      <UploadButton  dataURL = {this.state.dataURL} onChange={this.changeData}/>
    
    )
  }
}
 

Компонент

 import React, { useState} from 'react';
import axios from "axios";


export default function UploadButton ({dataURL}) {
    

console.log(dataURL);
const uploadHandler = (event) => {
    
  const uploadedFile = new FormData();
 
  uploadedFile.append( 'file',    
        event.target.files[0], 
        
      ); 

    
    axios.post("http://127.0.0.1:5000/uploadFile", uploadedFile).then(response => 
    
        dataURL.onChange(response.data) 
                )
    
}
    
        return( 
        <div>
        <input type="file" name="file"  onChange={uploadHandler}/>
        </div>
        
        );
    };

 

Пожалуйста, используйте верхний регистр для имен компонентов: UploadDataPage

Как только это будет сделано, я могу зарегистрировать dataURL в этой изолированной среде: https://codesandbox.io/s/sharp-star-pemh2?file=/src/App.js:524-538