时间戳

首页 > 解决方案 > 我正在尝试将多个文件打包到一个数组中，但一次只显示一个

reactjs - 我正在尝试将多个文件打包到一个数组中，但一次只显示一个

问题描述

我想将多个文件放入一个数组中，然后对其进行迭代。目前我只到了例如，我选择了两个文件，只显示一个。如果我在 UploadFile 函数的循环之后执行控制台输出，那么我总是会显示一个空数组。然而，在下面的返回块中，我只从 Map 方法中返回一个元素。无论我选择多少文件。

const [datei, setDatei] = React.useState([]);

const uploadFile = (e) => {

   let dateiNeu = e.target.files;

     for (var i = 0; i < dateiNeu.length; i++) {

      const newFile = dateiNeu[i];
      setDatei([...datei, newFile]);

     }

   // Length = 0  - WHY ?
      console.log(datei);

};
  
[...]
  

<Col md={12}>

        <input

        className={classes.input}

        id="contained-button-file"

        type="file"

        multiple

        onChange={(e) => uploadFile(e)}

      /> 

      <div className={classes.anhaenge}>
       //Only one element in the array is displayed
        {datei.map((d, index) => {

          return (


            <IconContext.Provider value={{ size: "50px" }}>

              <div>

                <FcFile></FcFile>

                {d.name}

              </div>

            </IconContext.Provider>

          );

        })}

      </div>

    </Col>

标签： reactjs

解决方案

更新如下状态（无需使用forloop）

const uploadFile = (e) => {
   let dateiNeu = e.target.files;
   setDatei([...datei, ...dateiNeu]);
};

推荐阅读