Question

我对ReactJS很新，所以这是我在其中使用Fetch的实现。

class App extends React.Component {
  function postData(url, data) {
      // Default options are marked with *
      return fetch(url, {
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
          'user-agent': 'Mozilla/4.0 MDN Example',
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
      })
      .then(response => response.json()) // parses response to JSON
    }


  render() {
    const test_content = ["first", "second", "third"];

    const initial_data = {
      'id': 1,
      'model-name': 'Joke'
    };

    postData('/start-jokes/', initial_data)
      .then(data => console.log(data)
       ) // JSON from `response.json()` call
      .catch(error => console.error(error));


    const jokes_div = test_content.map((item, i) => (
      <div key={i} className="card col-md-7">
        <div className="card-body">
            {item}
        </div>
      </div>
    ));
    return <div className="container" id="jokes">{jokes_div}</div>;
  }
}
// ========================================

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这可以正常运行，控制台会记录此响应。

Object { status: "ok", jokes: Array[10], ref-id: 11 }

jokes数组在Object中有一个id和text，该文本将与test_content一样用于填充项目，其中显示的是此处显示的唯一键id

关于如何从那里填充的任何指示都将非常感激。

Answer 1

永远不要在渲染中调用api。如果您希望在页面呈现时加载数据，请在componentDidMount中调用该函数;否则，如果你想加载一些其他事件或某些输入更改，请在onChange事件中调用它，并且如上所述不需要返回结果，你可以setState响应。

class App extends React.Component {
    constructor(props) {
       super(props);
       this.state = { 
           data : [],
        }
     }
    componentDidMount(){
     this.postdata()
    }

    postdata(){
        var self = this;
            fetch(url, {
            body: JSON.stringify(data),
            cache: 'no-cache', 
            credentials: 'same-origin', 
            headers: {
            'user-agent': 'Mozilla/4.0 MDN Example',
            'content-type': 'application/json'
            },
            method: 'POST',
            mode: 'cors', 
            redirect: 'follow',
            referrer: 'no-referrer',
            })
            .then(response => response.json()).then((json) => {
              self.setState({ data : json.data }) // which ever the key hold the data 
            })
    }

    render(){
       return( 
            <div>
            {this.state.data.length == 0 && 
               <div> No options available.</div>
            }
            {this.state.data.length > 0 && 
              <div className="container" id="jokes">
                   {this.state.data.map(function(item,i){
                          return(
                                <div key={i} className="card col-md-7">
                                <div className="card-body">
                                {item}   // here you are getting object in item. Get the key from the object like item.name
                                </div>
                                </div>
                      )
                   })}
               </div>
            }
          </div>
         )
    }
}

Answer 2

当您异步时，您需要考虑生命周期：

在componentDidMount中调用postData
而不是.then(response => this.setState({jokes: response.json()}))将结果设置为状态，例如(this.state.jokes || [])
在渲染中，而不是test_content，使用{{1}}

在较大的应用程序中，我考虑将渲染和数据管理分开（即做两个组件），但我希望你进一步了解以上几点......

使用ReactJS获取

2 个答案: