我如何在useEffect React js中循环对象

Question

这是我的代码！我想要 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
          />

Answer 1

有什么问题吗？您可以在 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);
}

我如何在useEffect React js中循环对象

How can i loop object in useEffect React js

javascript

put

reactjs

use-effect