Reactjs-从数组中获取值

我有一个图像列表，我想得到位于矩阵零位的图像的名称

正如您在图像中所看到的，名称在文件中。但是当我尝试

items[0].file

或

items[0]['file']

时，错误

TypeError返回：无法读取未定义的属性“file”

我的代码：

export function Multiple() {

    const handleChange = files => {
      files.map(file => {
        setItems(item => [
          ...item,
          {
            file,
            onRemove: handleOnRemove,
            onClick: handleOnClick
          }
        ]);
      });
    };
  
    const handleOnRemove = file => {
      setItems(item => [...item.filter(item => item.file.name !== file.name)]);
    };
  
    const handleOnClick = file => {
      getBase64(file)
      setNameImage(file.name)
      setIsOpen(true)
    };
  
    const [items, setItems] = React.useState([]);
    const [isOpen, setIsOpen] = React.useState(false);
    const [nameImage, setNameImage] = React.useState('');
    const [codeImage, setCodeImage] = React.useState('');
  
    function getBase64(file) {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        setCodeImage(reader.result)
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
      };
    }
  
    React.useEffect(() => {
      return console.log(items[0]['file'])
    }, [items]);
  
  
    return (
      <>
        <File
          name="image"
          label="Upload de imagens"
          onChange={handleChange}
          required={true}
          multiple={true}
        >
          {items.map((item, index) => (
            <File.Item {...item} key={index} />
          ))}
        </File>
  
        <Modal
          title={nameImage}
          onClose={() => setIsOpen(false)}
          show={isOpen}
        >
          <img src={codeImage} alt='Imagem' className='image' />
        </Modal>
      </>
    );
  }

export function Multiple（）{
const handleChange=文件=>{
file.map（文件=>{
设置项目（项目=>[
…项目，
{
文件
onRemove:handleOnRemove，
onClick：单击
}
]);
});
};
const handleOnRemove=文件=>{
setItems（item=>[…item.filter（item=>item.file.name！==file.name）]；
};
const handleOnClick=文件=>{
getBase64（文件）
setNameImage（文件名）
setIsOpen（真）
};
const[items，setItems]=React.useState（[]）；
常量[isOpen，setIsOpen]=React.useState（false）；
const[nameImage，setNameImage]=React.useState（“”）；
常量[codeImage，setCodeImage]=React.useState（“”）；
函数getBase64（文件）{
var reader=new FileReader（）；
reader.readAsDataURL（文件）；
reader.onload=函数（）{
setCodeImage（reader.result）
};
reader.onerror=函数（错误）{
console.log（'Error:'，Error）；
};
}
React.useffect（（）=>{
返回console.log（项[0]['file']）
}，[项目]；
返回(
{items.map（（项，索引）=>(
))}
setIsOpen（假）}
show={isOpen}
>
);
}

首次初始化项时，它是一个空数组，因此尝试记录项[0]。文件将给出错误信息。添加未定义的检查。也不要从useEffect返回它。返回用于清除逻辑

React.useEffect(() => {
 if(items[0] {
  console.log(items[0]['file'])
 }

}, [items]);

---

首次初始化项时，它是一个空数组，因此尝试记录项[0]。文件将给出错误消息。添加未定义的检查。也不要从useEffect返回它。返回用于清除逻辑

React.useEffect(() => {
 if(items[0] {
  console.log(items[0]['file'])
 }

}, [items]);

---

我们可以得到你的组件代码吗？我把代码放在问题的主体中，我们可以得到你的组件代码吗？我把代码放在问题的主体中只是好奇，没有[0]你怎么能使这个动态？你说的动态是什么意思？假设op想使用索引而不是使用[0]硬编码？如何查找索引键添加此检查是为了避免初始的空状态。如果您想检查任何随机索引，您可以将索引存储在状态中，并检查项[state.myDynamicIndex]，只是好奇，如果不使用[0]，您如何使此动态？动态是什么意思？假设op希望使用索引而不是使用[0]硬编码？如何查找索引键添加此检查是为了避免初始的空状态。如果要检查任何随机索引，可以将索引存储在状态中，并检查项[state.myDynamicIndex]