#reactjs #react-native
Вопрос:
У меня есть проблема, почему-то мой пользовательский интерфейс не обновляется после изменения состояния внутри функционального компонента, может быть, я что-то упускаю, но это должно измениться при изменении состояния или реквизита, может быть, это потому, что состояние передается другому компоненту?
реагировать — 16.13.1
react-native — 63 ( выставка 42 )
const OrderMockData = [
{id: "1"},
];
const OrdersMockData = [
{id: "1"},
{id: "1"},
]
const OrderListScreen = () => {
const [ordersState, setOrdersState] = useState(OrdersMockData);
const renderButtonSheet = () => {
return(<TouchableOpacity onPress={() => {
console.log('changed data')
setOrdersState(OrderMockData)
}}>
<Text>rerender</Text>
</TouchableOpacity>)
}
return (<><PseudoElement data={ordersState} /> {renderButtonSheet()}</>);
}
возможно, проблемная часть находится внутри самого «псевдоэлемента», потому что у него есть крючок «useReducer», где передается состояние из компонента»OrderListScreen»
const [state, dispatch] = useReducer<Reducer<State<T>, Action<T>>>(
listReducer,
{
listItems: data, // THIS ARE DATA passed true "PSEUDOELEMENT"
isFetching: false,
page: 1,
}
);
function listReducer<T>(state: State<T>, action: Action<T>) {
switch (action.type) {
case 'IS_FETCHING':
return {
...state,
isFetching: action.payload,
};
case 'SET_PAGE':
return {
...state,
page: state.page action.payload,
};
case 'SET_ITEMS':
return {
...state,
listItems: [...state.listItems, ...action.payload.items],
isFetching: action.payload.isFetching,
};
default:
return state;
}
}
Ответ №1:
Взамен вам нужно иметь один родительский тег.Таким образом, вы можете использовать Представление в качестве родительского тега.
const OrderMockData = [
{id: "1"},
];
const OrdersMockData = [
{id: "1"},
{id: "1"},
]
const OrderListScreen = () => {
const [ordersState, setOrdersState] = useState(OrdersMockData);
const renderButtonSheet = () => {
return(<TouchableOpacity onPress={() => {
console.log('changed data')
setOrdersState(OrderMockData)
}}>
<Text>rerender</Text>
</TouchableOpacity>)
}
return (<View>
<PseudoElement data={ordersState} />
<View>{renderButtonSheet()}</View>
</View>);
}
Комментарии:
1. эхх, я забыл в элементе псевдо-оболочки кода.., кстати, это не исправляет это
2. добавлено <> amp; <></> в пример
3. вы экспортировали функцию, в которой вы использовались ?
4. да, проблема в повторном запуске после нажатия кнопки (touchableopacity)
5. я понял, что, возможно, у меня внутри есть крючок «ПсевдоЭлемент» «Обучающий пользователя», где я передаю это «Состояние заказов», я обновлю код в примере, возможно, это поможет
Ответ №2:
Во-первых, попробуйте сделать это без вызывающей функции и добавьте весь рендеринг внутри return.
return (<><PseudoElement data={ordersState} />
<TouchableOpacity onPress={() => {
console.log('changed data')
setOrdersState(OrderMockData)
}}>
<Text>rerender</Text>
</TouchableOpacity>
</>);
Если это работает. Затем вы можете передать orderMockdata в функцию вместо прямого использования внутри внешней функции
Комментарии:
1. так что я, наверное, понял, что это его «Пользователь», где я передаю состояние от родителя внутри «псевдоэлемента», я отредактировал оригинальный пост, взгляните