类型错误:请求的值不是对象的键.反应原生

Question

>伙计们！我首先制作应用程序，并且响应值存在一些问题！当我单击GO时，我发送了请求并从中得到响应。我在控制台中查看，我有 20 个来自"伦敦"定位响应的项目，所以它可以工作，但没有将我的 json 解析为 key-valuse！伙计们，请帮帮我！ 使用最新的 React-native + android 虚拟模拟器 7.1.1 这是我在搜索页面的代码.js

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.'});
}
}

这是我在搜索结果中的代码.js

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)}/>
);
}

}

查看错误文本(红色指针)

在这里结束，这是来自控制台的响应。看看物品数量！所以响应有效！

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);

我看到您在使用导航器将listings作为道具传递后，在SearchResults组件中使用this.props.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} />);
}

为了确保将 props 正确传递给SearchResults组件，请在render方法中执行console.logSearchResults

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

我相信，如果您正确(作为对象)获得fetch输出，则问题可能出在您编写ListView和/或数据源的方式上。

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

干杯