小编alb*_*ert的帖子

我正在尝试在React中编写一个组件,它将使用fetch()API从网站获取数据,然后使用setState设置一个等于数据的状态,然后最终渲染数据.我的代码看起来像这样:

import React from 'react';

export default class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {apiInfo: 'default'};
    }

    componentDidMount(){
        fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(
            function(response){
                return response.json();
            }
            ).then(function(jsonData){
                return JSON.stringify(jsonData);
            }
            ).then(function(jsonStr){
                this.setState({apiInfo: jsonStr});
                console.log(jsonStr);
            });
    }

    render(){
        return(
                <tr>
                    <td>{this.state.apiInfo}</td>
                </tr>
        );
    }
}

但是,这会导致错误,说我无法设置undefined的State.我最终在HTML上呈现'default'.我到底错在了什么？

所以我写了一个非常简单的React应用程序,但没有使用create-react-app设置.我想自己学习如何建立CRA之类的东西.我基本上只是使用webpack来构建和捆绑我的React应用程序.目前,我有一个Babel加载器来翻译我的React/JSX,还有一个"html-loader",对于我的HTML我想(我读了Webpack的教程,说我需要它,但我仍然不明白为什么我有翻译我的HTML？这是HTML,它甚至可以翻译成什么？

我的项目目前还没有CSS样式,我想学习如何添加它.但我对我应该使用的装载机感到困惑.我很确定我的.less文件需要一个Less loader,但Less loader会编译更少的CSS.那么我需要一个CSS加载器来编译较少的文件吗？然后我需要CSS的样式加载器吗？

我正在编写一个组件,它将对站点的两个不同路径进行提取请求,然后将其状态设置为生成的响应数据.我的代码看起来像这样:

export default class TestBeta extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            recentInfo: [],
            allTimeInfo: []
        };
    }

    componentDidMount(){
        Promise.all([
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent'),
            fetch('https://fcctop100.herokuapp.com/api/fccusers/top/alltime')
        ])
        .then(([res1, res2]) => [res1.json(), res2.json()])
        .then(([data1, data2]) => this.setState({
            recentInfo: data1, 
            alltimeInfo: data2
        }));
    }

但是,当我去渲染我的两个状态时,我发现它们实际上仍然是空的,实际上并没有被设置为任何东西.我觉得我可能正在使用Promises或fetch()API错误,或者误解了setState的工作原理,或者是组合的东西.我测试了周围,发现在第一个then()后,我的data1和data2仍然是Promises由于某种原因,并且还没有成为真正的JSON对象.无论哪种方式,我无法弄清楚我的生活在这里发生了什么.任何帮助或解释将不胜感激

我知道ReactJS不被认为是MVC,因为创作者自己也这么认为.但是,最近,我被问到为什么React它不被认为是MVC,即使它符合MVC模式.React呈现一个视图,当使用客户端的人做出更改时,React将考虑更改,如果需要更新状态(并且不仅仅是状态？),然后返回更新的视图(就像控制器一样)将).我对MVC体系结构的严格定义有一个非常基本的理解,并且非常混淆为什么React现在不是MVC.

我当前在我的应用程序中使用PureComponent父级和子级组件。我希望PureComponent仅在状态或道具更改时才会更新。为了确保这一点，每次调用componentDidUpdate（）方法时，我都会有一个子组件日志。该应用程序看起来像这样：

class Parent extends React.PureComponent{
    constructor(props){
        super(props);

        this.state = {
            item1: null,
            item2: null,
            list1: [],
            list2: [],
        }

    render(){
        let combinedList= [...this.state.list1, ...this.state.list2];

        return(
            <React.Fragment>
                <Child myList={combinedList} />
                <OtherChild item={this.state.item1} />
            </React.Fragment>
        );

子组件看起来像这样：

class Child extends React.PureComponent{
    constructor(props){
        super(props);
    }

    componentDidUpdate(){
        console.log("Child updated");
    }

    render(){
        return(
            ....
        );
    }

例如，当父组件中item2的状态发生变化时，子组件将记录“已更新子组件”。我有点困惑，因为子组件没有收到item1作为道具，并且它的状态没有改变。这是因为“父级”组件放弃了所有子级吗？还是因为Child对它的myList道具所做的浅表比较表明它已经改变了？除了编写自己的shouldComponentUpdate()方法之外，如何防止孩子每次父母重新提交时都重新提交？