Dynami c рендеринг компонентов React с использованием данных из нескольких JSON объектов и массивов - PullRequest
Новая
       100

Dynami c рендеринг компонентов React с использованием данных из нескольких JSON объектов и массивов

0 голосов
/ 28 мая 2020

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

const OBJECTS = [
{name: "Object 1", logo: require('../logos/object1.png')},
{name: "Object 2", logo: require('../logos/object2.png')},
{name: "Object 3", logo: require('../logos/object2.png')},
]

Затем я сопоставляю эти объекты, чтобы отобразить карту для каждого объекта следующим образом: 

<View>
  {object.map(item => {
    return (
    <View key={item.key}>
      <Card>
        <Text>{item.name}</Text>
        <Image source={item.logo}/>
      </Card>
    </View>
        );
      })}
</View>

Однако теперь я хотел бы добавить дополнительные элементы к каждой карточке, которые принимают информацию, полученную из API и полученную в форме JSON. Эти JSON объекты выглядят примерно так:

Запрос 1: 

fetchPriceActionCreator {
  "items": [{
      "objectId": "object1",
      "price": 10
    },
    {
      "objectId": "object2",
      "price": 5
    },
    {
      "objectId": "object3",
      "price": 20
    }
  ]
}

Запрос 2: 

fetchBalanceActionCreator {
  "items": [{
      "objectId": "object1",
      "balance": 2,
      "account": 30022
    },
    {
      "objectId": "object2",
      "balance": 4,
      "account": 40035
    },
    {
      "objectId": "object3",
      "balance": 6,
      "account": 50021
    }
  ]
}

По мере того, как приложение становится более сложным, вы можете заметить, что создатели действий использовали для отправки запросов, что я начал использовать Redux. Моя задача теперь найти способ связать полученную информацию JSON с исходным массивом объектов OBJECTS, чтобы я мог включить эту информацию в соответствующую динамически отображаемую карточку, отображающую name, logo, balance и price каждого объекта.

Насколько я понимаю, мне нужно взять информацию stati c из массива объектов OBJECTS и переместить ее в initialState в любом редукторе или сохранить - однако я совершенно не понимаю, как это сделать go и как затем связать два извлеченных массива JSON объектов с массивом OBJECT объектов.

Конечный результат должен выглядеть примерно так: 

<View>
  {object.map(item => {
    return (
    <View key={item.key}>
      <Card>
        <Text>{item.name}</Text>
        <Image source={item.logo}/>
        <Text>{item.price}</Text>
        <Text>{item.balance}</Text>
      </Card>
    </View>
        );
      })}
</View>

Любая помощь будет принята с благодарностью.

EDIT:

В настоящее время мои редукторы redux выглядят так: 

function priceReducer(priceState = {}, action) {
  switch (action.type) {
    case REQUEST_PRICE:
      return Object.assign({}, priceState, {
        isFetching: true,
        didInvalidate: false,
      });
    case RECEIVE_PRICE:
      return Object.assign({}, priceState, {
        isFetching: false,
        didInvalidate: false,
        lastUpdated: action.lastUpdated,
        items: action.items,
      });
    default:
      return Object.assign({}, priceState);
  }
}

1 Ответ

1 голос
/ 29 мая 2020

в вашем хранилище redux вы можете обновить состояние, объединив начальное состояние и данные, поступающие из api, например, 

const priceState = {
    // some other props
    OBJECTS: [
        { name: "Object 1", logo: require('../logos/object1.png') },
        { name: "Object 2", logo: require('../logos/object2.png') },
        { name: "Object 3", logo: require('../logos/object2.png') },
    ]  // your initial Data as you posted.
}

function priceReducer(priceState = {}, action) {
    switch (action.type)
    {
        case REQUEST_PRICE: {
            return {
                ...priceState,
                didInvalidate: false,
                isFetching: true,
                OBJECTS: priceState.OBJECTS.map((obj) => {
                    const i = action.items.find((item) => item.objectId == obj.name) || {}; // using the conditional operator to avoid runtime error if no item was found for the given object

                    // Example: current object name is "object1", i will the item inside the payload that will have the its objectId equal to "object1"
                    return {
                        ...obj,
                        ...i /// i will be the item inside the payload that has the same object id as the current object name 
                    }

                })

            }
        }

        case RECEIVE_PRICE: {
            return {
                ...priceState,
                didInvalidate: false, 
                lastUpdated: action.lastUpdated,
                OBJECTS: priceState.OBJECTS.map((obj) => {
                    const i = action.items.find((item) => item.objectId == obj.name) || {}; // using the conditional operator to avoid runtime error if no item was found for the given object

                    // Example: current object name is "object1", i will the item inside the payload that will have the its objectId equal to "object1"
                    return {
                        ...obj,
                        ...i /// i will be the item inside the payload that has the same object id as the current object name 
                    }

                })

            }
        }

     default: return priceState;
    }

}

, если вы не уверены, что это за .... оператор распространения., что эквивалентно Object.assign, которое вы использовали

...