Я пытаюсь отобразить компонент реакции, который заполняется данными из запроса на выборку, в мой серверный API, но когда я добавляю несколько компонентов, все компоненты получают данные из последнего запроса.
Я использую redux и реагирую вместе с потоком. Мне удалось получить информацию с моего внутреннего сервера, и я удостоверился, что получаю ожидаемую информацию. Я могу установить информацию в компоненте после изменения состояния, но все компоненты имеют одинаковую информацию. Вот мой код:
Мое действие:
export function fetchStates(order_id) {
return dispatch => api.post(`${order_id}/states`)
.then((response) => {
dispatch({ type: 'FETCH_STATES_SUCCESS', response });
});
}
код из моего файла-компонента:
type Props = {
states: Array<State>,
order_id: number,
fetchStates: () => void,
}
//... and then inside the component
componentDidMount() {
this.props.fetchStates(this.props.order_id)
}
// This function is called from the render() method
renderStates() {
return this.props.states.map((state) =>
<div style = {{ flex: '1' }}>
{state.name}
</div>
);
}
// Connecting the component
export default connect(
state => ({
states: state.states.states,
}),
{ fetchStates }
)(States);
И мой редуктор:
const initialState = {
states: [],
};
export default function (state = initialState, action) {
switch (action.type) {
case 'FETCH_STATES_SUCCESS':
return {
...state,
states: action.response.data,
};
default:
return state;
}
}
И для создания компонентов я использую:
<States order_id = { order.id }/>
Ожидаемые результаты:
Component 1: state1, state2, state3 (from fetch 1)
Component 2: state4, state5, state6 (from fetch 2)
Component 3: state7, state8, state9 (from fetch 3)
Фактические результаты:
Component 1: state7, state8, state9 (from fetch 3)
Component 2: state7, state8, state9 (from fetch 3)
Component 3: state7, state8, state9 (from fetch 3)





Я новичок в реагировании и сокращении, но считаю, что вижу проблему в вашем методе renderStates.
renderStates() { return this.props.states.map((state) =>
<div style = {{ flex: '1' }}>
{state.name}
</div> ); }
Вы не назначаете уникальный ключ каждому созданному div, поэтому react не может обновлять каждый из них по отдельности, что приводит к обновлению всех при изменении состояния, в результате чего последнее обновление (state7, state8, state9) отображается во всех компонентах.
Я считаю, что исправление будет примерно таким:
renderStates() { return this.props.states.map((state) =>
<div key = {state.id} style = {{ flex: '1' }}>
{state.name}
</div> ); }
Ключ (без каламбура) предоставляет значение, которое будет уникальным для каждого состояния ключевого свойства. Это может быть поле id, если оно существует в вашем случае, name.ToString () или какое-то другое значение.
Обдумывая, как будет выполняться код, мне кажется, что вы ожидаете, что состояния в вашем магазине будут [fetch1.data, fetch2.data, fetch3.data]? Но мне кажется, что это будет просто [fetch3.data] из-за того, как вы используете оператор распространения. Поскольку вызовы выполняются с помощью fetchStates, значение хранилища для состояний будет установлено на [fetch1.data], затем [fetch2.data], затем [fetch3.data], которое отображается в каждом из ваших компонентов, заставляя их все быть одинаковыми.
Спасибо за ответ, но это не помогло. Доступный идентификатор в renderStates, это либо 7, 8 или 9. Я попытался добавить ключ к родительскому «порядку», но это тоже не сработало.