Почему не получается отобразить данные из внутреннего стейта при использовании redux?

Question

[olegan_09]

В моем компоненте есть свой стейт, в нем массив с объектами. Как только этот массив Не пуст, то он отрисовывается. и все работало хорошо, пока мне не понадобилось законнектить его с редакс. Как я его подключил, то странным образом ничего не отрисовывается. Внутренний стейт также существует и работает нормально. Я выводил его в консоль перед функцией map и он показывается, но в map не заходит. Как только отключаю redux от компонента, то все работает. но при следующем действии на клиенте (в данном случае отправка формы) он уже отрисовывается. Для меня это очень странное поведение, с которым я столкнулся впервые. Подскажите пожалуйста как это решить.

const renderFiles = () => {
    return (
      <div style={{ marginTop: 20 }}>
        <Grid container spacing={1}>
          //здесь выводил в консоль и все есть а ниже уже не работает код
          {files.map(({ fileName, base64 }) => (
            <Grid key={fileName} item>
              <div style={{ width: 90, height: 90, overflow: 'hidden' }}>
                <img
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  src={base64}
                />
              </div>
            </Grid>
          ))}
        </Grid>
      </div>
    );
  };

Comments

[Klein Maximus]

А как Редакс к компоненту (connect, hooks)? Как меппятся пропсы? Откуда вообще берется files?

[olegan_09]

Klein Maximus, files берется после выбора изображений на клиенте:

const handleChange = ({ target }) => {
    const { files } = target;
    const resultFiles = [];

    for (const file of files) {
      const reader = new FileReader();
      const fileName = kebabCase(file.name.split('.')[0]);

      reader.onloadend = () => {
        resultFiles.push({ fileName, base64: reader.result });
      }

      reader.readAsDataURL(file);
    }

    setFiles(resultFiles);
  };

коннектится все стандартно:

export default connect(null, actionCreators)(AddPhotos);

Пытался использовать для хранения не внутренний стейт компонента, а стор редакса, получилось тоже самое (не работатет). Файлы отрисовываются только после нажатия на кнопку отправить.

[Klein Maximus]

olegan_09, недостаточно информации. Если есть возможность и все еще нужна помощь, опубликуйте код песочнице например, https://codesandbox.io, или выложите на github/bitbucket/...

[olegan_09]

Я не смогу выложить туда весь код. Вот конкретный код компонента

import React from 'react';
import { connect } from 'react-redux';
import axios from 'axios';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Snackbar from '@material-ui/core/Snackbar';
import kebabCase from 'lodash/kebabCase';

import * as actions from '../../actions';
import Alert from '../Alert';
import CustomPapper from '../CustomPaper';

const actionCreators = {
  fetchImagesAdmin: actions.fetchImagesAdmin,
};

const AddPhotos = (props) => {
  const { fetchImagesAdmin } = props;
  const [openAlert, setOpenAlert] = React.useState(false);
  const [files, setFiles] = React.useState(null);
  const [fetchingState, setfetchingState] = React.useState('none');

  const handleCloseAlert = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpenAlert(false);
  };

  const handleChange = ({ target }) => {
    const { files } = target;
    const resultFiles = [];

    for (const file of files) {
      const reader = new FileReader();
      const fileName = kebabCase(file.name.split('.')[0]);

      reader.onloadend = () => {
        resultFiles.push({ fileName, base64: reader.result });
      }

      reader.readAsDataURL(file);
    }

    setFiles(resultFiles);
  };

  const handleSubmitImages = async (e) => {
    e.preventDefault();
    setfetchingState('requested');
    try {
      await axios.post('/admin/upload', { files });
      fetchImagesAdmin();
      setfetchingState('finished');
      setOpenAlert(true);
      setFiles(null);
    } catch (e) {
      setfetchingState('failed');
    }
  };

  const renderFiles = () => {
    return (
      <div style={{ marginTop: 20 }}>
        <Grid container spacing={1}>
          {files.map(({ fileName, base64 }) => (
            <Grid key={fileName} item>
              <div style={{ width: 90, height: 90, overflow: 'hidden' }}>
                <img
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                  src={base64}
                />
              </div>
            </Grid>
          ))}
        </Grid>
      </div>
    );
  };

  const renderFormAddPhotos = () => (
    <form autoComplete="off">
      <label htmlFor="file">
        <Button color="primary" component="span">
          Choose images
        </Button>
      </label>
      <input
        name='files'
        type='file'
        accept='image/*'
        id='file'
        multiple
        style={{ display: 'none' }}
        onChange={handleChange} />
      
      {files ? renderFiles() : null}

      <Button
        variant="contained"
        type="submit"
        color="primary"
        component="span"
        fullWidth
        disabled={!files || fetchingState === 'requested'}
        onClick={handleSubmitImages}
        style={{ marginTop: 40 }}
      >
        Upload
      </Button>
      {fetchingState !== 'failed' ? null : (
        <Box color="secondary.main" clone>
          <p style={{ padding: '0 14px 0 14px' }}>Failed to load image</p>
        </Box>
      )}
    </form>
  );

  return (
    <CustomPapper title="Add images">
      {renderFormAddPhotos()}
      <Snackbar
        open={openAlert}
        autoHideDuration={6000}
        onClose={handleCloseAlert}
      >
        <Alert onClose={handleCloseAlert} severity="success">
          Images upload successfully!
        </Alert>
      </Snackbar>
    </CustomPapper>
  );
};

export default connect(null, actionCreators)(AddPhotos);