При выборке данных в реагирующем компоненте все компоненты заканчиваются одинаковыми данными

Question

Я пытаюсь визуализировать реагирующий компонент, который заполняется данными из запроса на выборку, в мой внутренний API, но когда я добавляю несколько компонентов, все компоненты заканчиваются данными из последнего запроса.

Я использую редукс и реагирую вместе с потоком. Я успешно получаю информацию с моего внутреннего сервера и убедился, что получаю ожидаемую информацию. Я могу установить информацию в компоненте, как только состояние изменится, но все компоненты получат одну и ту же информацию. Вот мой код:

Мое действие:

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)

Answer 1

Я довольно новичок в реакции и редукции, но думаю, что вижу проблему в вашем методе renderStates.

renderStates() {   return this.props.states.map((state) =>
    <div style={{ flex: '1' }}>
      {state.name}     
    </div>   ); }

Вы не назначаете уникальный ключ каждому созданному элементу div, поэтому реакция не может обновить каждый из них в отдельности, что приводит к обновлению всех при изменении состояния, в результате чего последнее обновление (state7, state8, state9) отображается во всех компонентах. .

Я полагаю, что исправление будет выглядеть следующим образом:

renderStates() {   return this.props.states.map((state) =>
    <div key={state.id} style={{ flex: '1' }}>
      {state.name}     
    </div>   ); }

Ключ (без каламбура) предоставляет значение, которое будет уникальным для каждого состояния для свойства ключа. Это может быть поле id, если оно существует в вашем случае, name.ToString () или какое-либо другое значение.