React Native для каждого элемента в JSON объекте, возвращаемом AsyncStorage, создает компонент на экране

Question

У меня есть страница, которая в настоящее время хранит данные в AsyncStorage в виде строкового JSON объекта с ключами: «title», «description» и «rating». Для каждого JSON объекта, хранящегося в Asyn c, я хотел бы создать новый компонент в спецификациях c, используя компонент

. Я получил этот объект для чтения и преобразовал обратно в JSON объекты. на другой странице. Моя проблема в том, что я хотел бы, чтобы эти данные использовались для заполнения экрана предварительно созданным компонентом «calendarEntryBox» для каждого JSON объекта.

В настоящее время я могу создать один компонент для каждого элемента в массиве этот массив содержит элементы из Asyn c, помещенные в него. В целях тестирования он сохраняется с предварительно созданными записями, прежде чем Asyn c сделает что-либо Тем не менее, поскольку AsyncStorage asyn c, когда я пытаюсь поместить данные из Asyn c и сохранить их в этом массиве, функция map в отображении экрана уже сделала это.

Как я могу взять JSON объектов, полученных асинхронно, использовать их для создания компонента и поместить этот компонент на страницу?

Спасибо

---

• Вот код, который я имею для передачи элементов в массив из AsyncStorage

---

const getData = async () => {
        try{

            var allDaysAsString = await AsyncStorage.getItem("Days");
            var allDaysAsJSON = JSON.parse(allDaysAsString);

            Object.keys(allDaysAsJSON).forEach(function(key) {
                // console.log(Object.keys(allDaysAsJSON));
                calendarEntries.push({
                    title: allDaysAsJSON[key].title, 
                    description: allDaysAsJSON[key].description, 
                    rating: allDaysAsJSON[key].rating
                });
            });

Вот код, который я имею для создания представления для каждого из элементов в массиве:

<View style={styles.calendarContainer}> 
                    {calendarEntries.map((item, key)=>(
                    <CalendarEntryBox key = {key} style = {styles.smallBox} />)
                    )}
</View>

Это работает для тестовых элементов, уже сохраненных в массиве calendarEntries:

 var calendarEntries = [{rating: "bad", description: "hello I am a descrip", title: "what a title this is"},{rating: "bad", description: "hello I am a descrip", title: "what a title this is"}];

Но когда элементы добавляются в этот массив с помощью функции getData, это не отображается для пользователей смотреть.

Answer 1

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

в состоянии вашего компонента. Я добавляю свойство с именем calendarEntries

state = {
   calendarEntries: []
}

и изменяю функцию getData, чтобы возвращать массив, содержащий проанализированные значения, когда разрешен (его асин c) и в componentDidMount я бы вызвал getData

async componentDidMount() {
    const parsedValuesArray = await this.getData()
    this.setState({ calendarEntries: parsedValuesArray )} // will make page re-render
}

, и в вашей функции рендеринга вы используете свойство состояния:

{
     this.state.calendarEntries.map((item, key)=>(
     <CalendarEntryBox key = {key} style = {styles.smallBox} />)
     )
}

показанные коды максимально упростил, чтобы показать вам подход. надеюсь, это поможет