Как установить исходное состояние из реквизита после извлечения?

Question

Я хочу получить данные с помощью fetch () и передать их по иерархии компонентов и использовать эти данные для установки начального состояния одного из моих компонентов

Я попытался установить начальное состояние с помощью реквизитаи передавая их вниз.

componentDidMount = () => {
        getFileSystem().then(response => {
            if (response.success) {
                this.setState({
                    filesystem: response.filesystem,
                    projects: response.projects
                })
            }
        }).catch(err => {
            this.setState({
                filesystem: {
                    name: '/',
                    type: 'directory',
                    children: [
                        { name: 'error.txt', type: 'file', data: 'error' }
                    ]
                },
                projects: []
            })
        })

    }

class TerminalContainer extends Component { 

    constructor(props) {
            super(props)
            this.state = {
                filesystem: props.filesystem,
                terminal_data: [''],
                current_dir_name: '/',
                current_dir: props.filesystem,
                full_path: ""
            }
        }
...

Но компонент вызывает функцию конструктора до того, как данные загружаются в подпорки компонента.Это означает, что начальное состояние компонента установлено неправильно.

Мне нужен какой-то способ предотвратить рендеринг компонента, пока все данные не будут готовы

Answer 1

Если вы хотите использовать реквизиты, данные компоненту в качестве начального состояния, и эти реквизиты являются состоянием в родительском компоненте, которые выбираются асинхронно, необходимо отложить рендеринг дочернего компонента.

Вы могли бы, например, добавьте дополнительный фрагмент состояния с именем isLoading, который вы установите на false, когда выборка будет завершена, и используйте его для условной визуализации компонента TerminalContainer.

Пример

class App extends React.Component {
  state = {
    isLoading: true,
    filesystem: null,
    projects: null
  };

  componentDidMount() {
    getFileSystem()
      .then(response => {
        if (response.success) {
          this.setState({
            isLoading: false,
            filesystem: response.filesystem,
            projects: response.projects
          });
        }
      })
      .catch(err => {
        this.setState({
          isLoading: false,
          filesystem: {
            name: "/",
            type: "directory",
            children: [{ name: "error.txt", type: "file", data: "error" }]
          },
          projects: []
        });
      });
  }

  render() {
    const { isLoading, filesystem } = this.state;

    if (isLoading) {
      return null;
    }
    return <TerminalContainer filesystem={filesystem} />;
  }
}