javascript - 如何在 react 中渲染 Prop 更改时返回的数据

Question

我无法弄清楚如何获取 API 调用以重新渲染到屏幕。我有一个 apiCall 函数，它传递 this.state 并通过传递的 ref 更改状态，但它不会触发 Prop 更改的重新渲染。

searchBody.js

 class SearchBody extends Component {
constructor(props) {
      super(props)
      const queryString = require('query-string');
      const queryTerm = queryString.parse(this.props.location.search);
      this.state = { urlSearchTerm: queryTerm.search,
                      searchTerm: '',
                      loaded: false,
                      buttonClicked: null,
                      apiData: [],
                      tableHeaders: [],
                      tableRows: []
                    }
      // check if URL has search term if so pass term for apiCall
      if (this.state.urlSearchTerm) {
         this.state.searchTerm = this.state.urlSearchTerm
      }

      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }


// capture input text field to state variable
handleChange = searchTerm => event => {
  this.setState({ searchTerm: event.target.value })
  //console.log(this.state.searchTerm)
  }

// handle form submission
handleSubmit = (event) => {
  console.log('Inside HandleSubmit')
  console.log('button clicked update url to /?search=' + this.state.searchTerm)
  this.props.history.push('/?search=' + this.state.searchTerm);
  this.setState({buttonClicked: true})
  event.preventDefault();
}
// load search from API if search term is in URL
componentDidMount() {
  console.log('Inside compDidMount')
  if (this.state.urlSearchTerm){
      this.setState({apiData: apiCall(this.state)})
  }
 }

render() {
  const { classes } = this.props;

  let table = ''
  //check if API has loaded data and show results if true
if (this.state.loaded){
  if (this.state.apiData.length === 0 && this.state.buttonClicked){
    table = 'No Results Found'
    //reset search button State
    this.setState({buttonClicked: false})
  } else {
    table = <TableData tableHead={this.state.tableHeaders} tableData={this.state.tableRows} />
    //reset search button State
    this.setState({buttonClicked: false})
  }
}
    return (

      <Fragment>
      <hr/>
       <form /*className={classes.container}*/ noValidate autoComplete="off" onSubmit={this.handleSubmit} >
          <TextField
              id="search"
              label="Search field"
              type="search"
            /*  className={classes.textField}*/
              margin="normal"
              onChange={this.handleChange('search')}
            />
            <Button color='primary' letiant="outlined" type="submit" >Search DB</Button>
        </form>

          <h1>Results: </h1>
              {table}
        </Fragment>
          )
  }

}
export default SearchBody

方法.js

// break API data into arry of data for table component rows.
export const parseTableHeaders = input => {
  // console.log(input)
  if (input !== undefined && input.length !== 0) {
  let head = []
  for(let key in input[0]){  head.push(key);}
  //console.log(head)
  return head
}
}

///break API data into array of headers for table component
export const parseTableRows = (input) => {
  let rows = [];
  for(let o in input) {
      rows.push(Object.values(input[o]));
  }
  //console.log(head)
  return rows
}


//get api data from AWS
export function  apiCall(props) {
  const searchTerm = props.searchTerm
  let apigClientFactory = require('aws-api-gateway-client').default;

  const config =  {
                //apiKey: 'xxxx',
                invokeUrl:'https://xxxx.execute-api.us-east-2.amazonaws.com'
                }

  let apigClient = apigClientFactory.newClient(config);
  let params = {
        //This is where any header, path, or querystring request params go. The key is the parameter named as defined in the API
        //  userId: '1234',
        search_keyword: searchTerm
      };
      // Template syntax follows url-template https://www.npmjs.com/package/url-template
  let pathTemplate = '/beta/testDB'
  let method = 'GET';
  let additionalParams = {
      //If there are any unmodeled query parameters or headers that need to be sent with the request you can add them here
      headers: { },
      queryParams: {
        search_keyword: searchTerm
              }
    }
    apigClient.invokeApi(params, pathTemplate, method, additionalParams)
      .then(function(result){
          //This is where you would put a success callback
          console.log('apiCall Returned. searchTerm; ', searchTerm)
          console.log(result)
          props.loaded = true
          props.tableHeaders = parseTableHeaders(JSON.parse(result.data))
          props.tableRows = parseTableRows(JSON.parse(result.data))
          return JSON.parse(result.data)
      }).catch( function(result){
          //This is where you would put an error callback
      })


}

我的代码结构是否错误？我的理解是，当 Prop 发生变化时，它将强制重新渲染。我应该将“this.state.apiData”传递到 apiCall 而不是像这样的整个状态？

apiCall(this.state.apiData)

它在 componentDidMount() 中运行，我相信这是调用 API 的正确位置，但它不会在回调时重新渲染。我可以在调试器中看到状态变量正在按预期更新。我应该在 apiCall() 中设置返回变量并让返回值更新 componentDidMount() 中的状态吗？一旦返回数据，这会强制重新渲染吗？

类似这样的东西吗？

this.setState({apiData: apiCall()})

如果我从 apiCall() 返回 this.state.apiData 并让它解析 apiCall 中的表头和行，那么当返回状态变量时，这会强制更新吗？

Answer 1

您正在运行异步调用来获取一些剩余的 api 数据。根据定义，异步意味着您不知道代码何时完成。这意味着您需要在 apiCall 完成后运行某种类型的回调。

这里有一个 Rest api 调用，它返回一个 Promise 对象。 Promise 对象基本上是一个用于向异步代码添加回调的接口(interface)。我建议您采用以下选项之一在restApi 调用后运行回调。

1.) 您可以将回调函数作为第二个参数传递给restApi()。您可以这样调用此回调:

let that = this;
apiCall(props, function(result) {
    that.setState({apiData: result});
});

export function  apiCall(props, callback) {
    ...
    apigClient.invokeApi(params, pathTemplate, method, additionalParams)
        .then(function(result){
            ...
            callback(result);
            ...
        });
    ...
}

2.) 您的另一个选择是通过锁定 api 调用创建的 Promise 来处理 apiCall 的解析。当您执行异步代码时，对异步方法的调用会立即返回 Promise 对象，您可以将其返回到调用函数以允许调用者附加回调。这听起来可能有点令人困惑，我不是最擅长解释事情，但请参阅以下内容:

let that = this;
apiCall(props).then(function(result) {
    that.setState({apiData: result});
});

export function  apiCall(props) {
    ...
    return apigClient.invokeApi(params, pathTemplate, method, additionalParams)
    .then(function(result){
        ...
    });
}

这里的主要区别是您将实际的异步调用返回到 apigClient.invokeApi。这允许任何调用 apiCall() 的人在 .then() 方法中附加任何回调功能。

最终，您要确保在restApi 数据实际返回调用方时调用setState。 .then() 是触发该调用并可靠地获取返回结果的最简单方法。

注意:您还应该研究一下 JS 中的 Promise，因为 .then 方法可以接受 2 个参数，一个处理数据成功返回的函数，一个处理错误报告的函数。