Действие отправки React-Redux в компоненте
Я новичок в реагировании на родные, проблема, с которой я сталкиваюсь, заключается в попытке получить данные из действия в componentdidmount, но когда я устанавливаю свои реквизиты, данные равны нулю. Реквизиты устанавливаются, если я обращаюсь к ним в методе рендеринга. Может кто-нибудь посмотреть код и сказать мне, что я делаю неправильно.
Ниже я получаю действие
export const Accountability = connect(
// inject states
(state: States) => ({
// props.loading -> modules.app.loading
loading: state.app.loading,
doctorName: state.doctor.doctorName
}),
// inject actions
dispatch => ({
doDoctors: () =>
dispatch(actions.doctor.getDoctors())
})
)(AccountabilityView)
Вот я и звоню.
render() {
const {loading, doDoctors, doctorName } = this.props
// Getting the data here.
doDoctors()
}
Одна вещь, которую я замечаю, это то, что я получаю предупреждение в консоли
ExceptionsManager.js:82 Предупреждение. Невозможно обновить во время существующего перехода состояния (например, в render). Методы рендеринга должны быть чистой функцией свойств и состояния.
ОБНОВИТЬ: В настоящее время все мои файлы разделены (действие, редуктор, константы, индекс). Мое действие получает данные из вызова API. Ниже мой редуктор:
import { handleActions } from 'redux-actions'
import { LOAD_DOCTORS } from './constants'
export type DoctorState = {
doctorName: string
}
const initialState: DoctorState = {
doctorName: '',
}
export default handleActions(
{
[LOAD_DOCTORS]: (state: DoctorState = initialState, action): DoctorState
=> {
const p = action.payload
return {
doctorName: p.doctorName,
}
},
},
initialState
)
ОБНОВЛЕНИЕ: 2 Это то, что код показывает в консоли, обратите внимание, что doDoctors возвращает пустой массив при первом вызове. При вызове в ComponentDidMount он показывает только первый, а не второй.
компонентдидмаунт
{screenProps: undefined, navigation: {…}, loading: true, doctorName: "",
doDoctors: ƒ}
оказывать
{screenProps: undefined, navigation: {…}, loading: true, doctorName: "",
doDoctors: ƒ}
{screenProps: undefined, navigation: {…}, loading: true,
doctorName: Array(10), doDoctors: ƒ}
Любая помощь будет оценена по достоинству.
так ты называешь это render(), не так ли? Вы пытались вызвать это componentDidUpdate, когда весь необходимый реквизит был готов?
Да, это вызывается при рендеринге и вызывается три раза, причем последний раз содержит данные. Если я поставлю его в componentDIdUpdate, ничего не произойдет.
Ответы 1
Возможные события, при которых вы могли бы вызвать свой action, это => componentDidMount и componentWillReceiveProps ... render метод используется только для возврата некоторого jsx на основе обновления вашего компонента props:
class YourComponent extends React.Component {
componentDidMount() {
// Here's where you call your action,
// first time your component is loaded: <<<===
this.props.doDoctors();
}
componentWillReceiveProps(nextProps) {
// Here's where you could call your action,
// if the component is already mounted: <<<===
this.props.doDoctors();
}
render() {
const {loading, doctorName } = this.props;
return (
<View>
...
</View>
);
}
}
Вы вызываете
doDoctors()в функцииrender()? Можете ли вы дать более крупный фрагмент?