[英]Data not loading to the UI with redux-saga
對於我的本機應用程序,當我調用 API 端點時,它不會將有效負載加載到 UI,但我可以看到數據正在通過控制台加載。 有人可以幫我解決問題嗎? 這要死我了。 我在這里列出了我的傳奇和減速器。
應用程序.js
/**
* @format
* @flow
*/
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { store } from './store/store'
import Home from './screens/home/home'
class App extends Component {
render() {
return (
<Provider store={store}>
<Home />
</Provider>
)
}
}
export default App
商店.js
import { createStore, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import createSagaMiddleware from 'redux-saga'
import rootReducer from '../reducers'
import rootSaga from '../sagas'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
rootReducer,
applyMiddleware(
sagaMiddleware,
createLogger(),
),
)
sagaMiddleware.run(rootSaga)
export {
store,
}
動作.js
export function getTransatcions() {
return { type: "TRANSACTIONS_REQUESTED" }
}
sagas.js
import { takeEvery, call, put } from "redux-saga/effects"
export default function* watcherSaga() {
yield takeEvery("TRANSACTIONS_REQUESTED", workerSaga)
}
function* workerSaga() {
try {
const payload = yield call(getTransatcions)
yield put({ type: "TRANSACTIONS_LOADED", payload })
} catch (e) {
yield put({ type: "TRANSACTIONS_ERRORED", payload: e })
}
}
function getTransatcions() {
return fetch("https://jsonplaceholder.typicode.com/posts").then(response => {
return response.json()
})
}
減速器.js
const initialState = {
isFetching: false,
transactions: []
}
export default (state = initialState, action) => {
switch (action.type) {
case "TRANSACTIONS_REQUESTED":
return {
...state,
isFetching: true
}
case "TRANSACTIONS_LOADED":
return {
...state,
isFetching: false,
transactions: action.payload
}
case "TRANSACTIONS_ERRORED":
return {
...state,
isFetching: false,
error: action.error
}
default:
return state
}
}
home.js(用戶界面屏幕)
import React, { Component } from 'react'
import { connect } from "react-redux"
import {
View,
Text,
Button,
StatusBar,
ScrollView,
SafeAreaView
} from 'react-native'
import { Header } from 'react-native/Libraries/NewAppScreen'
import { getTransatcions } from '../../actions'
import styles from './styles/home'
class Home extends Component {
state = {
transactions: []
}
componentWillMount() {
this.props.getTransatcions()
}
render() {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
style={styles.scrollView}
contentInsetAdjustmentBehavior="automatic"
>
<Header />
<View style={styles.body}>
<Text>{this.props.transactions[0].title}</Text>
{this.props.transactions && this.props.transactions.map(each => {
<>
<Text>{each.title}</Text>
</>
})}
<Button
title="Press me"
// onPress={actionCreators.getTransactions}
/>
</View>
</ScrollView>
</SafeAreaView>
</>
)
}
}
function mapStateToProps(state) {
return {
transactions: state.transactions
}
}
export default connect(mapStateToProps, { getTransatcions })(Home)
有人可以幫我解決這個問題。 我不得不使用 saga,而且我對 redux-saga 概念有點陌生。 數據正在用戶界面中查看 如果我這樣說。
this.props.transactions[0].title
但是如果我用這樣重復 UI 中的所有內容,它就不會顯示數據。
{this.props.transactions && this.props.transactions.map(each => {
<>
<Text>{each.title}</Text>
</>
})}
你錯過了map
內的return
{this.props.transactions && this.props.transactions.map(each => {
return (<>
<Text>{each.title}</Text>
</>)
})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.