如何在获取数据后呈现组件

问题描述 投票:0回答:2

我有一个名为“Recetas”(Receipes)的容器,里面有一个名为“Showcase”的组件。这个想法是用户可以在“Recetas”中创建一个请求,当获取数据时,容器将重新渲染,“Showcase”将使用新数据进行更新。

我将请求保存在“Recetas”状态,并将数据传递给带有props的“Showcase”。

问题是在我收到新数据之前正在执行渲染。所以我总是显示“旧”数据。在我收到数据之前,有什么方法可以暂停渲染吗?或者我该如何解决?

class Recetas extends Component {
state = {
    loading: false,
    data: [],
    maxResult: 12,
    minResult: 0,
    query: 'burger',
    appId: 'xxxxxx',
    appKey: 'xxxxx'
}

componentDidMount() {
    this.fetchData();
}

async fetchData() {
    this.setState({loading: true});
    console.log('fetching ...');
    try {
        const request = `https://api.edamam.com/search?q=${this.state.query}&app_id=${this.state.appId}&app_key=${this.state.appKey}&from=${this.state.minResult}&to=${this.state.maxResult}`;
        console.log('request: ', request);
        const result = await axios(request);
        this.setState({ data: result.data.hits, loading: false });

    } catch (error) {
        console.log(error);
    }
}

queryHandler = value => {
    this.setState({
        query: value
    });
    this.fetchData();
}

render() {

    return (

        <div className={classes.Recetas}>
            {console.log('actualState: ', this.state)}
            <SearchInput 
                query={this.state.query} 
                queryHandler={(value) => this.queryHandler(value)}/>

            <Showcase 
                data={this.state.data}
                loading={this.state.loading}/>

        </div>
    ); 
}

展示组件

const showcase = props => {

const spinner = <Spinner />;
const recetas = props.data.map((elem, index) => {
    return <Receta key={index} title={elem.recipe.label} url={elem.recipe.image} />
});

console.log('[Showcase] props.data: ', props.data);
return (

    <div className={classes.Showcase}>
        {props.loading ? spinner : recetas}
    </div>
);

}

reactjs
2个回答
0
投票

如果功能组件没有观察props的变化。您应该将微调器移动到容器组件。

Recetas.js

render() {
  ...
  const {loading, data} = this.state
  return (
    ...
    <div className={classes.Recetas}>
        {loading ? < Spinner /> : <Showcase data={data} />}
    </div>
  ); 
}    

//////////////
ShowCase.js

const showcase = props => (
  <div className={classes.Showcase}>
  {
    props.data.map(({recipe: {label, imgage}}, index) => <Receta key={index} title={label} url={image} />)
  }                            
  </div>
)

并使用Destructuring_assignment更短的代码。


0
投票

最后我设法解决了它添加了一个setTimeout函数,它在'queryhandler'方法中更新状态后执行500 ms的获取。

© www.soinside.com 2019 - 2024. All rights reserved.