Question

正如您所看到的，我的handleSearchRequest函数正在调用一个API，稍后会被IconButton标记内的onClick事件调用。

如何在ComponentWillMount中加载API，我仍然可以在HandleSearchRequest上写东西，比如setState或者其他东西，所以Onclick仍然可以调用这个函数吗？

class Searcher extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      query: '',
      application: null
    }

  }

  // componentDidMount () {
  //
  //
  //
  // }

  handleSearchRequest() {
    console.log('this.state', this.state);
    const BASE_URL = 'https://itunes.apple.com/search?term';
    const FETCH_URL = BASE_URL + '=' + this.state.query;
    console.log('FETCH_URL', FETCH_URL);

    fetch(FETCH_URL, {
      method: 'GET'
    })

      .then(response => response.json())
        .then(json => {
          const application = json.results[0];
          this.setState({application})
          console.log({application})
        });
  }

  render () {
    return (
      <div style={{position: 'relative'}}>
           <IconButton
             iconStyle={styles.smallIcon}
             style={styles.iconButton}
             onClick={() => this.handleSearchRequest()}
           >
               <Search color={black} />
           </IconButton>
        <TextField
          underlineShow={false}
          id="searchId"
          value={this.state.query}
          fullWidth={true}
          style={styles.textField}
          inputStyle={styles.inputStyle}
          hintStyle={styles.hintStyle}
          onChange={event => {this.setState({ query: event.target.value}) }}
          onKeyPress={event => {
            if (event.key === 'Enter') {
              this.handleSearchRequest()
            }
          }}
        />
        <br/>
        <br/>
        {
          this.state.application !== null
          ?
            <ResultItem
              {...this.props} {...this.state}
              application={this.state.application}
            />
          : <div></div>
        }
      </div>
    );
  }
}
export default Searcher;

修改

这是ResultItem组件

class ResultItem extends Component {

componentDidMount () {

}
  render () {
    // console.log ('myProps', this.props);

    let application = {
      artistName: '',
      country: '',
      primaryGenreName: '',
      trackName: ''
    };

    if (this.props.application !== null) {
      application = this.props.application
    }

    return (
      <div>

        <Card style={{width:'30%'}}>
          <CardMedia>
            <div style={styles.appCard}/>
          </CardMedia>
          <FloatingActionButton
            style={styles.addButton}
            backgroundColor={'#CC0000'}
            >
            <ContentAdd />
          </FloatingActionButton>
          <CardTitle
            title={application.artistName}
                     subtitle="Application" />
          <CardText>
            <div>
              <div>Name:   <b>{application.artistName}      </b> </div>
              <div>Country:<b>{application.country}         </b> </div>
              <div>Genre:  <b>{application.primaryGenreName}</b> </div>
              <div>Song:   <b>{application.trackName}       </b> </div>
            </div>
          </CardText>
        </Card>
    </div>
    );
  }
}

export default ResultItem;

Answer 1

生命周期方法componentDidMount通常用于获取要使用的React组件的一些初始数据。

给定一个使HTTP请求获取某些数据的方法。例如，

fetchData() {
  fetch('https://www.somewhere.com/someResource')
    .then(response => response.json())
    .then(responseJson => {
      this.setState({ someResource: responseJson });
    });
}

您可以在获取数据后使用setState（）将数据保存到组件状态，如上所示。

然后只需从componentDidMount()调用它，用初始数据填充组件状态：

componentDidMount() {
  this.fetchData();
}

如果您想再次获取该数据，可以再次致电fetchData()。

要从任何组件方法访问资源（例如在render（）中），请使用this.state.someResource。

<强>更新

如果您的组件依赖于自己渲染的数据，那么您应该注意。最初没有数据，因此如果组件依赖于该数据则不应该呈现该组件，如果该组件不存在则会产生错误。

解决方案是在渲染任何内容之前检查数据是否存在。

示例

render() { if (!this.props.someResource) { // resource is not yet loaded return <div>Loading resource...</div>; } // Otherwise, if someResource has been fetched (i.e. is not undefined) // You can safely render the component that is dependent on it return ( <MyComponent someResource={this.props.someResource} /> ); }

在函数内获取请求。如何将它放在ComponentDidMount中？

1 个答案: