反应 - 加载JSON和渲染组件

Question

正如标题所说，我试图呈现一个React组件，其中包含通过使用fetch（）加载它从JSON中抓取的数据。

api调用工作正常，但我无法呈现数据。

下面的代码：

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      user: {} 
 
     } 
 
    } 
 

 
    getUserById(uId) { 
 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
 
      .then((response) => { 
 
       return response.json() 
 
      }) 
 
      .then((json) => { 
 
       return json; 
 
      }); 
 
    } 
 

 
    componentDidMount() { 
 
     this.setState({ 
 
      user: this.getUserById(4) 
 
     }) 
 
    } 
 

 
    render() { 
 
     return (
 
      <div> 
 
       <h1>User</h1> 
 
       <p>ID: {this.state.user.id}</p> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById("container") 
 
);

<div id="container"></div> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

解决这个问题的任何想法？

Answer 1

的问题是在这条线：

<div class="container"></div> 

您定义class和getElementById得到它。

另一个变化是，Ajax调用会异步所以getUserById不会立即返回数据和setState将设置状态变量undefined值不是从服务器返回的数据。为了解决这个问题，一旦得到响应，请执行setState。

检查：

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 

 
     this.state = { 
 
      user: {} 
 
     } 
 
    } 
 

 
    getUserById(uId){ 
 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
 
     .then((response) => { 
 
      return response.json() 
 
     }) 
 
     .then((json) => { 
 
      this.setState({ 
 
       user: json 
 
      }) 
 
     }); 
 
    } 
 

 
    componentDidMount() { 
 
     this.getUserById(4); 
 
    } 
 

 
    render() { 
 
     console.log(this.state.user); 
 
     return (
 
      <div> 
 
       <h1>User</h1> 
 
       <p>ID: hello</p> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById("container") 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

注意：你正在一个ajax调用，这样，而不是调用内部的setState funtion的，做的setState一旦你得到的回应，里面。然后，像这样：

.then(json => { 
    this.setState({user: json}); 
}); 

Answer 2

这个问题我可以s EE - 你取的承诺将不会返回从服务器获取数据，所以我的建议是你的诺言回调里面SETSTATE，所以它应该是这样的：

getUserById(uId) { 
    fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
     .then(result => result.json()) 
     .then(json => { 
      this.setState({user: json}); 
     }); 
} 
componentDidMount() { 
    this.getUserById(4); 
} 

Answer 3

尝试绑定getUserById方法，也为的setState用户对象与json响应。

class App extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     user: {} 
    } 
this.getUserById = this.getUserById.bind(this); //add this to your constructor 
} 

getUserById(uId) { 
    fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
     .then((response) => { 
      return response.json() 
     }) 
     .then((json) => { 
      return json; //setState in here with your ajax request**strong text** 
     }); 
} 

componentDidMount() { 
    this.setState({ 
     user: this.getUserById(4) 
    }) 
} 

render() { 
    return (
     <div> 
      <h1>User</h1> 
      <p>ID: {this.state.user.id}</p> 
     </div> 
    ); 
} 
} 

ReactDOM.render(
<App/>, 
document.getElementById("container") 

Answer 4

我认为你的主要问题是getUserById方法不返回任何东西，你应该设置它内部的状态。然后你对主容器的ID有问题，但我暗示你只在代码片段中犯了错误。

我测试过上面的代码，试试吧：

class App extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      user: null 
     } 
    } 

    getUserById(uId) { 
     fetch(`https://jsonplaceholder.typicode.com/users/${uId}`) 
      .then((response) => { 
       return response.json() 
      }) 
      .then((json) => { 
       return json; 
      }) 
      .then((result) => { 
       this.setState({user: result}); 
      }); 
    } 

    componentDidMount() { 
     this.getUserById(4) 
    } 

    render() { 
     console.log(this.state.user); 
     return (
      <div> 
       <h1>User</h1> 
       <p>{this.state.user != null ? this.state.user.id : 0}</p> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <App/>, 
    document.getElementById("container") 
);