javascript - 我如何在useEffect React js中循环对象
问题描述
这是我的代码!我想要 useEffect 中的循环对象!我有一个编辑数据的任务!所以为此我创建了一个状态并使用 useEffect 我正在获取数据并在输入字段上显示值!但我想展示的数据是图像!
const editor = useRef(null);
const [content, setContent] = useState('');
const [baseImage, setBaseImage] = useState('');
const [baseImages, setBaseImages] = useState([]);
// console.log('multiple images', baseImages);
const [titleValue, setTitleValue] = useState('');
console.log('title', titleValue);
const [shortDesc, setShortDesc] = useState('');
const [getCategory, setGetCategory] = useState([]);
const [getSubCategory, setSubGetCategory] = useState([]);
const [editValues, setEditValues] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const res = await axios.get(
`${process.env.REACT_APP_API_URL}/article/${resultsId}`
);
setEditValues(res.data);
setTitleValue(res.data.article.title);
setShortDesc(res.data.article.shortDesc);
setContent(res.data.article.content);
setGetCategoryId(res.data.article.category_id);
setGetSubCategoryId(res.data.article.subCategory_id);
setBaseImage(
`${process.env.REACT_APP_API_URL}` + res.data.article.image
);
// setBaseImages(res.data.slider);
// for (let slide in setBaseImages(res.data.slider)) {
// `${process.env.REACT_APP_API_URL}` + slide.image;
// }
} catch (err) {}
};
fetchData();
}, [resultsId]);
这是我正在使用的 JSON!在这里,我需要循环这些滑块并将它们放在 setBaseImages 值上!然后,将它们显示在输入字段中以编辑其数据!
{article: {…}, slider: {…}}
article: {publication: "2021-04-28T17:47:18.605Z", rating: 0, _id: "60899fd57d49581056094f91", title: "chax ", author_id: "60749394a467242d21282700", …}
slider:
60899fd57d49581056094f92: {_id: "60899fd57d49581056094f92", image: "/uploads/slider/1619632085654.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f93: {_id: "60899fd57d49581056094f93", image: "/uploads/slider/1619632085669.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f94: {_id: "60899fd57d49581056094f94", image: "/uploads/slider/1619632085696.jpeg", article: "60899fd57d49581056094f91", __v: 0}
60899fd57d49581056094f95: {_id: "60899fd57d49581056094f95", image: "/uploads/slider/1619632085756.jpeg", article: "60899fd57d49581056094f91", __v: 0}
这是输入字段:
<input
type='file'
onChange={(e) => {
uploadImages(e);
}}
multiple
/>
解决方案
有什么问题?你可以只运行一个普通的循环useEffect
——在那个钩子中循环与普通的 JS 没有什么不同。
看起来你做错的唯一一件事就是设置一个值而不用它做任何事情。
${process.env.REACT_APP_API_URL} + res.data.article.image
只是连接两个字符串,什么都不做,然后在你离开循环时把它扔掉。你想把push
一些东西放入一个数组中吗?
const res = {
article: {},
slider: [
{"60899fd57d49581056094f92": {_id: "60899fd57d49581056094f92", image: "/uploads/slider/1619632085654.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
{"60899fd57d49581056094f93": {_id: "60899fd57d49581056094f93", image: "/uploads/slider/1619632085669.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
{"60899fd57d49581056094f94": {_id: "60899fd57d49581056094f94", image: "/uploads/slider/1619632085696.jpeg", article: "60899fd57d49581056094f91", __v: 0}},
{"60899fd57d49581056094f95": {_id: "60899fd57d49581056094f95", image: "/uploads/slider/1619632085756.jpeg", article: "60899fd57d49581056094f91", __v: 0}}
]
}
for (slide of res.slider) {
let key = Object.keys(slide)[0]
console.log(slide[key].image);
}
推荐阅读
- mysql - 需要多少个join才能获得不同的标签?
- docker - Heroku:如何在 gitlab CI/CD 中发布现有图像?
- python - 在 AWS lambda 函数中获取日志两次
- angular - 从 Angular 应用程序中的 HttpErrorResponse 获取错误消息
- javascript - React 16.4 允许从状态更改中调用 getDerivedStateFromProps。如何应对?
- couchbase - Couchbase 系统日志启用配置
- python - 在 skimage 中使用标签和 regionprops 时出错,
- android - Android - 如何定义备份内容规则以仅包含共享首选项
- performance - 实施密集型简单报告的最佳解决方案
- ios - Xamarin iOS 设置 NavigationController.NavigationBar.Translucent = true; 将滚动视图内容向上移动