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: ""
            }
        }
...

但是组件在数据加载到组件的props中之前调用了构造函数。这意味着该组件的初始状态设置不正确。

我需要某种方法来防止在所有数据准备就绪之前呈现组件

Answer 1

如果要将给组件使用的props用作初始状态，并且这些props是异步获取的父组件中的状态，则需要延迟子组件的呈现。

您可以例如添加一个称为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} />;
  }
}

提取后如何通过道具设置初始状态？

1 个答案: