那些遇到过的问题

小编use*_*957的帖子

我的Reactjs代码说未捕获的TypeError：无法读取null的属性“值”

我正在尝试制作一个程序，该程序显示输入值到输出盒中的更改，但是出现诸如未捕获的类型错误之类的错误：无法读取null的属性“值”，我不知道这里的错误是什么

var App =React.createClass({
    getInitialState:function(){
        return{
            value:"My Value"
        }
    },
    updateValue:function(modifiedValue){
        this.setState({
            value:modifiedValue
        })
    },
    render:function(){
        return(
            <div className="inputBox container-fluid">
                <h1 className="text-center text-primary">Hello FreeCodeCampers !!!</h1>
                <div className="row col-md-12">
                    <InputBox value={this.state.value} updateValue={this.updateValue}/>
                    <h1>{this.state.value}</h1>
                </div>
            </div>
        );
    }
});
var InputBox =React.createClass({
    update:function(){
        var modifiedValue=ReactDOM.findDOMNode(this.refs.inputValue).value;
        this.props.updateValue(modifiedValue);
    },
    render:function(){
        return(
            <input type="text" value={this.props.value} onChange={this.update} ref="initialValue"/>
        );
    }
});
ReactDOM.render(<App />,
document.querySelector("#app")
);
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script> …
Run Code Online (Sandbox Code Playgroud)

reactjs

use*_*957
lucky-day
3
推荐指数
1
解决办法
2755
查看次数

在表中的Reactjs中显示来自JSON的数据

在这里,我编写了一个从API http://fcctop100.herokuapp.com/api/fccusers/top/recent获取数据的代码,并在我的案例中显示看起来像下面的表格数据,你可以看到重复每一个 在此输入图像描述

但我想让它看起来像 在此输入图像描述

这就是我迄今所做的

var MainBox  = React.createClass({
    render:function(){
        return(
            <App/>
        );
    }
});
var App = React.createClass({
    //setting up initial state
    getInitialState:function(){
        return{
            data:[]
        };
    },
    componentDidMount(){
        this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
    },
    //showResult Method
        showResult: function(response) {

            this.setState({
                data: response
            });
    },
    //making ajax call to get data from server
    getDataFromServer:function(URL){
        $.ajax({
            type:"GET",
            dataType:"json",
            url:URL,
            success: function(response) {
                this.showResult(response);
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render:function(){
        return(
            <div>
                <Result result={this.state.data}/>
            </div>
        );
    }
});
var …
Run Code Online (Sandbox Code Playgroud)

ajax reactjs

use*_*957
lucky-day
2
推荐指数
1
解决办法
1万
查看次数

标签 统计

reactjs ×2

ajax ×1