Получение данных в реагирующем компоненте, все компоненты получают одни и те же данные

Я пытаюсь отобразить компонент реакции, который заполняется данными из запроса на выборку, в мой серверный 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)
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
133
1

Ответы 1

Я новичок в реагировании и сокращении, но считаю, что вижу проблему в вашем методе 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 () или какое-то другое значение.

Спасибо за ответ, но это не помогло. Доступный идентификатор в renderStates, это либо 7, 8 или 9. Я попытался добавить ключ к родительскому «порядку», но это тоже не сработало.

Rasmus 11.01.2019 18:10

Обдумывая, как будет выполняться код, мне кажется, что вы ожидаете, что состояния в вашем магазине будут [fetch1.data, fetch2.data, fetch3.data]? Но мне кажется, что это будет просто [fetch3.data] из-за того, как вы используете оператор распространения. Поскольку вызовы выполняются с помощью fetchStates, значение хранилища для состояний будет установлено на [fetch1.data], затем [fetch2.data], затем [fetch3.data], которое отображается в каждом из ваших компонентов, заставляя их все быть одинаковыми.

Matt 11.01.2019 18:37

Другие вопросы по теме

Похожие вопросы

Как перенаправить пользователя после аутентификации из действия Redux?
Как исправить 'index.js: 1446 Предупреждение: невозможно вызвать setState (или forceUpdate) на отключенном компоненте ... "в ReactJS
Реагировать на синтаксис es6
ReactJS Поиск ввода по нескольким значениям
Стресс / нагрузочное тестирование веб-приложения с ReactJS FE / Java BE: какой инструмент использовать
Transform - игнорировать все модули нод, поддерживающие реакцию, для шутки?
React не может прочитать свойство getAttribute из undefined
Есть ли способ проверить, существует ли изображение перед установкой источника изображения в React, когда источник изображения имеет объединенные переменные?
Почему атрибут value отображает входные данные как только для чтения, а defaultValue - как для чтения и записи?
Компонент с сохранением состояния с Typescript и response-redux: аргумент типа 'typeof MyClass' не может быть назначен параметру типа Component