Question

我是React的新手，所以这可能只是一个初学者的错误。

总之，它会抛出提到的错误/警告并且正在运行两次获取。它最终得到了正确的最终结果。

设置是一个显示基本用户个人资料信息的页面，其功能可以更改以后添加的个人资料。

详细说明：

componentDidMount似乎被调用一次，根据下面的console.log输出
无论出于何种原因，都会调用两次fetch。两次都从远程
this.setState（{account.data.data [0]}）第一次失败并抛出错误。这特别奇怪，因为表明组件在componentDidMount 中调用时未挂载。第二次fetch和setState运行时，它正确地更新状态。

确切的错误讯息：

警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。

这是主要组成部分：

class AccountTable extends React.Component{

constructor(props){
    super(props)
    this.state={
        account:{},
    }
}

componentDidMount(){
    console.log('componentDidMount');//outputs once
    fetch('/mon-compte-api', {
        method: 'get',
        credentials: 'same-origin'
    })
    .then((response) => {
        console.log('fetch'); // outputs twice 
        response.json().then((data) => {
            console.log('data', data);// correct output both times
            this.setState({account: data.data[0]}) // this throws the error
            console.log('state_account', this.state.account); 
// no output for this.state.account first time around. Correct output 2nd time 
        })       
    })
    .catch((err) => {
        console.log(err)
    });      
}

render(){
    return (
        <table>
                <TableRow 
                   account={this.state.account} />
        </table>
    );      
}
}

ReactDOM.render(<AccountTable />,document.querySelector("#react_account"));

这是子组件：

const TableRow = (props) => {
if(Object.keys(props.account).length === 0){ //show something while awaiting fetch
    return (
        <tbody>
            <tr><td>Loading.....</td></tr> // shows momentarily
        </tbody>
        );
}else{
        return ( // outputs correct info eventually
            <tbody>
                <tr><th>Name</th><td>{props.account.name}</td></tr>
                <tr><th>Email</th><td>{props.account.email}</td></tr>
            </tbody>
        );  
}   
}

请求回复信息：

Status code: 200 OK
Date: Thu, 21 Dec 2017 11:53:50 GMT
Server: Apache/2.2.32 (Unix) mod_wsgi/3.5 Python/2.7.13 PHP/7.1.8     mod_ssl/2.2.32 OpenSSL/1.0.2j DAV/2 mod_fastcgi/2.4.6 mod_perl/2.0.9  Perl/v5.24.0
X-Powered-By: PHP/7.1.8
Cache-Control: no-cache, private
Content-Length: 600
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: application/json

在componentDidMount上反应错误 - ＆gt;只能更新已安装或安装的组件？

0 个答案: