將資料推送到檔案樹時，它會推送 2 組相同的資料，我不確定為什么。
我有一個簡單的 json 陣列，如下所示：
export const treeDataFile = [{
type: 'directory',
name: '2022',
}]
export default treeDataFile;
我正在嘗試通過呼叫此函式將我擁有的 4 個檔案推入其中：
const addFileToTree = (file,i) => {
treeDataFile.push({type: i, name: file});
console.log(treeDataFile)
setFirstRender(true);
};
這就是呼叫 addFileToTree 的方式：
const [files, setFiles] = useState([]);
//AWS Setup
useEffect(() => {
Amplify.configure({
Auth:{
identityPoolId: '',
region: 'us-east-1',
},
Storage: {
AWSS3: {
bucket:'',
region: 'ca-central-1',
}
}
});
},[]);
//gets all files in the bucket
useEffect(() => {
Storage.list('').then(files => {
const s3_files = setFiles(files);
s3_files.replace("\"eTag\":", "\"perfect\":");
console.log(s3_files);
}).catch(err => {
console.log(err);
});
},[]);
return (
<div classname="container">
<GeistProvider>
<CssBaseline />
<Tree style={{width:"280px", height: "500"}} value={treeDataFile} onClick={handleShow} />
</GeistProvider>
<table>
<tbody>
{files.map((file,i) => (
<tr key={file.key}>
{addFileToTree(file.key,i)}
</tr>
))}
</tbody>
</table>
</div>
);
};
結果是這樣的，應該只有4個專案，但它已經復制了它。
任何幫助將不勝感激。
uj5u.com熱心網友回復：
您正在改變全域treeDataFile作為組件功能的副作用（甚至“更糟糕”，作為 render 的副作用.map()）。除此之外，這會導致treeDataFile每次更新組件時變得越來越大。
你也可能在使用React 的 StrictMode ，它從一開始就對你的組件進行雙重渲染，以確保你沒有像現在這樣愚蠢地做任何事情。
如果您的目標是基于全域andtreeDataFile為該組件派生 a ，您可以使用 來做到這一點，這是一個設計用于基于其他資料派生新資料的鉤子；在這種情況下，你的“基地”和你得到的。（我認為它們是道具，因為您沒有展示。當然，它們也可以是狀態。）treetreeDataFilefilesuseMemotreeDataFilefiles
我從這個組件中洗掉了表格，因為它沒有任何基于您擁有的原始代碼的真實內容。
編輯：基于問題中的增強代碼，一切的預期型別變得更加清晰。首先，現在很明顯files是一組 AWS Amplify S3 檔案，并且我們正在使用 Geist 的 Tree 組件。可以在此 CodeSandbox 中找到一個完整的 TypeScript 示例（沒有 AWS Amplify，但有其型別）。
const treeDataFile = [{
type: "directory",
name: '2022',
}];
export default function App() {
const [files, setFiles] = React.useState([]);
React.useEffect(() => {
// Load files via AWS Amplify.
Storage.list('').then(setFiles);
}, []);
const treeWithFiles = React.useMemo(() => {
const tree = [...treeDataFiles]; // shallow-copy
(files || []).forEach((file, i) => {
tree.push({ type: "file", name: String(file.key) });
});
return tree;
}, [files]);
return (
<div className="container">
<GeistProvider>
<CssBaseline />
<Tree style={{ width: "280px", height: "500" }} value={treeWithFiles} />
</GeistProvider>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/456607.html
標籤：javascript 反应 json 亚马逊-s3 文件树
上一篇：s3檔案夾權限獲取http請求