Question

使用案例/情况：

我使用jwt-token登录创建了一个应用程序，工作正常。一旦用户登录，他就可以查看包含鸡尾酒的表格，其中的内容来自RestAPI。

到目前为止工作如此之好，但是反应创建了一个循环，并且每秒都会重新发送render()。

// ... imports
import { getCocktails } from '../../actions/cocktailActions';

class ListCocktailPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cocktails: [],
            errors: {},
            isLoading: true
        };
    }

    render() {
        const { getCocktails } = this.props;

        console.log('This string is logged every second');

        // calling function from cocktailActions
        this.props.getCocktails().then((response) => {
            this.setState({ cocktails: response.data.data, isLoading: false });
        });

        const cocktailsContent = (
            <table className="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Created</th>
                        <th>Modified</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.cocktails.map(function(item, key) {
                        return(
                            <tr key={key}>
                                <td>{item.id}</td>
                                <td>{item.attributes.name}</td>
                                <td>{item.attributes.description}</td>
                                <td>{item.attributes.created}</td>
                                <td>{item.attributes.modified}</td>
                                <td>
                                    <Link to={`/edit-cocktail/${item.id}`}><span className="glyphicon glyphicon-pencil"></span></Link>&nbsp;
                                    <a href="#"><span className="glyphicon glyphicon-trash"></span></a>
                                </td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        );

        const loaderContainer = (
            <div>
                <h3>Loading ...</h3>
            </div>
        );

        return(
            <div className="col-sm-8 col-sm-offset-2">
                <h1>List Cocktails</h1>
                { this.state.isLoading ? loaderContainer : cocktailsContent }
            </div>
        );
    }
}

ListCocktailPage.propTypes = {
    getCocktails: PropTypes.func.isRequired,
}

export default connect(null, { getCocktails })(ListCocktailPage);

这是我的getCocktails()功能：

export function getCocktails() {
    return dispatch => {
        return axios.get('http://myapi.local/api/cocktails.json', { headers: headers }).then((response) => {
            return response;
        });
    }
}

这是我的控制台的屏幕截图。同样在网络标签中，我看到他每秒都在请求我的api。

我的观点是，只要api发出响应，react就认为它需要重新呈现DOM。然后它会创建一个新请求，收到一个新响应，然后进入一个循环。

我该如何解决？我太新反应了，也许我不理解逻辑。

Answer 1

你不应该调用getCocktails里面的渲染函数，一般来说你永远不应该更新render函数内的状态。

在getCocktails

中移动此功能componentWillMount

说明：

每当状态更新时，React都会触发渲染，所以你正在做的是获取数据，然后从渲染函数内部更新状态，这导致另一个渲染 - ＆gt;然后另一个提取 - ＆gt;然后另一个渲染，所以你需要在componentWillMount内移动fetch并从渲染函数

中删除它

有关反应生命周期和组件功能的更多详细信息，请查看此链接

https://reactjs.org/docs/react-component.html

ReactJS在渲染中创建循环

1 个答案: