Question

因此，我需要从请求中获取响应，然后将其发送到另一个组件。问题是组件调用发生时我的请求没有完成。所以我最终在“ TableComponent”上得到的是一个空数组

这是我在以下位置发出请求的组件：

class Carrinho extends Component {
    constructor(props) {
        super(props);
        this.getMateriais()
    }
    
    async getMateriais() {
        let service = new MateriaisService();
        service.getMateriais().then(res => res.json()).then((result) => {
            this.setState({materiais: result})
      
        })       
    }

render() {
        return (
        <div>
            <TableComponent materiais={this.state.materiais} itens={this.state.array_teste}></TableComponent>
        </div>
        );
    }

这就是我在TableComponent.js上设置状态的方式：

constructor(props) {
        super(props);
        this.state = {
            materiais : props.materiais,
            }

Answer 1

这将不起作用，因为在构造函数中调用this.getMateriais()不会触发新的渲染。您需要使用componentDidMount生命周期和async/await语法。

class Carrinho extends Component {
    constructor(props) {
        super(props);
        this.getMateriais()
    }
  
    async componentDidMount(){
        await this.getMateriais();
    }

    
    async getMateriais() {
        let service = new MateriaisService();
        const result = await service.getMateriais();
        const data = await result.json();
        this.setState({ materiais: result });       
    }

    render() {
        return (
        <div>
            <TableComponent materiais={this.state.materiais} itens={this.state.array_teste}></TableComponent>
        </div>
        );
    }

但是，不建议使用async/await处理React编程模型中的promise。相反，您应该在等待时渲染其他组件或负载。

class Carrinho extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount(){
        this.getMateriais();
    }
    
    getMateriais() {
        let service = new MateriaisService();
        service.getMateriais().then(res => res.json()).then((result) => {
            this.setState({materiais: result})  
        })       
    }

    render() {
        return (
        <div>
            {this.state.materiais && <TableComponent materiais={this.state.materiais} itens={this.state.array_teste}></TableComponent>}
        </div>
        );
    }

如何等待状态更改以呈现？

1 个答案: