Question

我有一个名为“ 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>
);

}

Answer 1

如果功能组件未注意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来缩短代码。

Answer 2

最后，我设法解决了这个问题，添加了setTimeout函数，该函数会在更新“ queryhandler”方法中的状态后执行500毫秒的提取操作。

提取数据后如何渲染组件

2 个答案: