Question

我正在尝试显示API中的数据。获取数据后，我将状态设置为API中的数据。当我这样做时，重复调用render（）。

我刚开始学习反应。请帮忙。

export class Table extends Component{
constructor(){
    super();
    this.state = {
        data : []
    }
}
render(){
    const pa = this.state.data.map(function(dt){
        console.log(dt);
        return <div><p>dt.name</p><p>{dt.email}</p></div>
    })
    this.getData = ()=>{
        axios.get("https://jsonplaceholder.typicode.com/users").then((res)=>{
            console.log(res.data);
            this.setState({data: res.data}); //causes render() to be called repeatedly
        });
    }
    this.getData();
    return(
        <div>
            {pa} //does not work
        </div>
        );
}

}

Answer 1

你应该解决一些问题（在我看来）。

首先，数据提取应该在componentDidMount或componentWillMount挂钩（根据您的喜好）完成。这样，render方法将被调用一次，而不是执行该循环。

其次，删除从组件中获取的数据，并通过prop传递该功能。这样，您的组件将更易于理解且易于理解。从其他一些钩子你可以使用这样的方法：this.props.fetchData()。

Answer 2

要重复调用render（），为什么？

因为它进入无限循环：

render -> api call -> setState -> render (repeat)

{pa} //不起作用，为什么？

因为您忘记使用返回内部地图回调函数。

<强>解决方案：

而不是在render方法中进行api调用，而是在 componentDidMount 生命周期方法中执行，并使用返回内部的map回调函数。

像这样写：

export class Table extends Component{

    constructor(){
        super();
        this.state = {
            data : []
        }
    }

    componentDidMount(){
        axios.get("https://jsonplaceholder.typicode.com/users").then((res)=>{
            console.log(res.data);
            this.setState({data: res.data});
        });
    }

    render(){
        const pa = this.state.data.map((dt,i) => <p key={i}>{dt.name}</p>)

        return(
            <div>
                {pa} 
            </div>
        )
    }
}

注意：为创建内部循环的每个元素分配唯一键。

设置状态时重复调用render（）

2 个答案: