Question

家伙！我首先制作应用程序，并对响应值有一些问题！当我点击GO时，我发送了请求并从中获得响应。我在控制台看，我有20件来自“伦敦＆＃39;伦敦＆＃39;找到，所以它的工作原理，但并没有解析我的json到key-valuse！伙计们，请帮助我！使用最新的React-native + android虚拟仿真器7.1.1 这是我的SearchPage.js代码

＆＃13;

function urlForQueryAndPage(key, value, pageNumber) {
  var data = {
      country: 'uk',
      pretty: '1',
      encoding: 'json',
      listing_type: 'buy',
      action: 'search_listings',
      page: pageNumber
  };
  data[key] = value;
 
  var querystring = Object.keys(data)
    .map(key => key + '=' + encodeURIComponent(data[key]))
    .join('&');
 
  return 'http://api.nestoria.co.uk/api?' + querystring;
};

export default class SearchPage extends Component {

 constructor(props) {
    super(props);
    this.state = {
      searchString: 'london',
      isLoading: false,
      message: ''
    };
  }
    
onSearchTextChanged(event) {
    this.setState({ searchString: event.nativeEvent.text });
  }

onSearchPressed() {
  var query = urlForQueryAndPage('place_name', this.state.searchString, 1);
  this._executeQuery(query);
}

_executeQuery(query) {
  this.setState({ isLoading: true });
  console.log(query);
  
  fetch(query)
  .then(response => response.json())
  .then(json => this._handleResponse(json.response))
  .catch(error =>
     this.setState({
      isLoading: false,
      message: 'Something bad happened ' + error
   }));
}
 
_handleResponse(response) {
  this.setState({ isLoading: false , message: '' });
  if (response.application_response_code.substr(0, 1) === '1') {
  console.log('Properties found: ' + response.listings.length);
  
  this.props.navigator.push({
    id: 'SearchResults',
    name: 'SearchResults',
    passProps: {listings: response.listings}
    
});
console.log(passProps);
  } else {
    this.setState({ message: 'Location not recognized; please try again.'});
  }
}

＆＃13;

这是我的SearchResults.js代码

＆＃13;

export default class SearchResults extends Component {
 
constructor(props) {
    super(props);
    var dataSource = new ListView.DataSource(
      {rowHasChanged: (r1, r2) => r1.lister_url !== r2.lister_url});
    this.state = {
      dataSource: dataSource.cloneWithRows(this.props.listings)
    };
  }
 
  renderRow(rowData, sectionID, rowID) {
    return (
      <TouchableHighlight
          underlayColor='#dddddd'>
        <View>
          <Text>{rowData.title}</Text>
        </View>
      </TouchableHighlight>
    );
  }
 
  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderRow.bind(this)}/>
    );
  }
 
}

＆＃13;

Look at the error text ( in red pointer)

End here it is response from console. Look at the items count!So response works!

Answer 1

两件事：

1 - 尝试将.then放在response.json()之后，如此：

  fetch(query)
  .then((response) => {
    response.json()
    .then(json => this._handleResponse(json.response))})
  .catch(error =>

更新：实际上，不需要更改.then的顺序，它应该以任何方式工作。

2 - 我相信当你console.log(passProps)时，passProps定义不正确，因此，console.log(passProps)不会打印任何内容（如果我错了，请纠正我）。你可以试试这个：

var passProps = {listings: response.listings};
this.props.navigator.push({
  id: 'SearchResults',
  name: 'SearchResults',
  passProps: passProps   
});
console.log(passProps);

在使用导航器将this.props.listings作为道具传递后，我发现您在SearchResults组件中使用了listings。你能够直接this.props.listings（而不是this.props.passProps.listings）的唯一方法是你的导航器的renderScene方法中有这样的东西：

if (routeId === 'SearchResults') {
    return (<SearchResults {...route.passProps} navigator={navigator} />);
}

或

if (route.id === 'SearchResults') {
    return (<SearchResults listings={route.passProps.listings} navigator={navigator} />);
}

要确保将道具正确传递到SearchResults组件，请使用console.log <{1}}方法render进行SearchResults

  render() {
    console.log("SearchResults props: ", this.props);
    return (
      <ListView

我相信如果您正确地输出fetch（作为对象），问题可能就是您编写ListView和/或dataSource的方式。

除此之外，没有足够的信息（例如预期的json响应，以及你实际得到的信息）来判断问题所在。

干杯

TypeError：请求的值不是对象的键。反应母语

1 个答案: