我試圖在react-js和預覽中上傳一個視頻，但我失敗了，如何將fi變數傳遞到url部分，我的代碼是
import{useState}。from 'reaction;
import ReactPlayer from 'react-player';
function Video(props) {
const [file,setFile] = useState( null )。
const onInputValue = (e) => {
var fi = URL.createObjectURL（e. target.files[0])
console.log（fi）。
};
return (
<div>
< form method="post" action="#"/span> id="#"/span>>
< input type="file" onChange={onInputValue}/>
<button>Upload</button>
</form>/span>
<ReactPlayer
控制。
url={fi}
id="videoz" />/span>
</div>/span>
);
}
export default Video;
我這樣做，但在fi變數錯誤中顯示錯誤
。srccomponentsVideo.js.
Line 22:18: 'fi'沒有定義 no-undef
如何解決這個問題，我是react的新手！
。uj5u.com熱心網友回復：
你的var fi，是作用于函式的。它在onInputValue之外是不可見的。因此出現了錯誤。
你想使用的變數，應該在它被改變時引起重新渲染。狀態是合乎邏輯的解決方案。你可以使用一個帶有useState的狀態變數，它將被更新。
function Video(props) {
const [file,setFile] = useState( null )。
const [fi,setFi] = useState(''/span>)。
const onInputValue = （e）=> {
var newFi = URL.createObjectURL（e. target.files[0])
console.log（newFi）。
setFi（newFi）。
};
return (
<div>
< form method="post" action="#"/span> id="#"/span>>
< input type="file" onChange={onInputValue}/>
<button>Upload</button>
</form>/span>
<ReactPlayer
控制。
url={fi}
id="videoz" />/span>
</div>/span>
);
}
uj5u.com熱心網友回復：
我建議你把你的fi保存在一個狀態里面，這樣你就可以把它傳遞給你的ReactPlayer，然后它就需要一個驗證，看看它是否為空。
span class="hljs-keyword">import { useState } from 'reaction'。
import ReactPlayer from 'react-player';
function Video(props) {
const [file, setFile] = useState(null)。
const [fi, setFi] = useState(null);
const onInputValue = (e) => {
setFi(URL.createObjectURL（e. target.files[0] )。
console.log（fi）。
};
return (
<div>
< form method="post" action="#"/span> id="#"/span>>
< input type="file" onChange={onInputValue} />
<button>Upload</button>
</form>/span>
< ReactPlayer controls url={fi} id="videoz"/span> />
</div>
);
}
export default Video;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332285.html
標籤：
下一篇：錯誤提示：型別上的屬性不存在