一、主要任務：悉尼小程序管理后台，添加景點頁面的開發
二、所遇問題及解決
1. 上傳多個不同分類音頻信息時，如中文音頻和英文音頻，要求音頻不是放在一個數組中的，每個音頻是一個獨立的字段，此時：
<Upload
action="/hserve/v2/file/upload/" // 必選參數，上傳的地址；
listType="picture" // 上傳列表的內建樣式，這個不是很明白 text、picture、picture-card 之間的區別，默認值為 text；
showUploadList={false} // 是否展示 updateList，默認值為 true；
accept="audio/*" // 接受上傳的文件類型，audio／*、video／*、image／*
fileList={cnAudioFileList} // 已經上傳的文件列表，這里的 cnAudioFileList 初始值是為空的，上傳后通過 handleAudioChange 來設置 cnAudioFileList 的值；
onChange={this.handleAudioChange.bind(this, 'cn')} // 這里因為要分別上傳中英文的音頻，所以額外傳了一個用以區分的參數；
>
handleAudioChange = (type, { file, fileList }) => { // file：當前操作的文件對象， fileList：當前的文件列表；（自定義傳的參數需要放在默認參數的前面）
if (file.status === 'done') {
fileList[fileList.length - 1].url = file.response.path
let lastFile = fileList[fileList.length - 1]
if (type === 'cn') {
this.setState({
cnAudioFileList: fileList,
site: { ...this.state.site, cnAudio: lastFile.url }
})
} else {
this.setState({
enAudioFileList: fileList,
site: { ...this.state.site, enAudio: lastFile.url }
})
}
return
}
if (type === 'cn') {
this.setState({ cnAudioFileList: fileList })
} else {
this.setState({ enAudioFileList: fileList })
}
}
2. react 條件渲染，兩種寫法：
（1）let example = <Example {...props} />，再在 render 中引用 { example };
（2）直接在 render 中： { condition === value ? (<div>1</div>) : (<div>2</div>) };
3. 對於多個接口相同，參數不同的請求，使用 axios.all()，具體用法：
import axios from 'axios'
let promises = [];
promises.push(request1[params])
promises.push(request2[params])
axios.all(promises).then(res => {
console.log(res) // res 作為一個數組，每項對應每個請求
}).catch(() => { message.error('請求失敗') })
如果確定有幾個請求的話，可以分開返回參數，即 axios.all(promises).then(axios.spread(function(a, b) => {}))