Для этого вы хотите взять свои предметы и отобразить их в компоненте повестки дня.Я не знаю, какие реквизиты содержит объект item, поэтому я просто составил item.name и item.whothing.Я также не знал, как вы хотите отобразить эти данные.Вы можете отобразить его так, как вам нравится, в операторе return функции map.
Если вы хотите, чтобы таблица просто отображала таблицу в операторе return и динамически добавляла реквизиты вашего элемента соответственно.Имеет ли это смысл?
Кроме того, самый внешний элемент вашего возврата в функции карты должен иметь ключевую опору, которая принимает только уникальные ключи.
state = {
items: [],
selectedDate: ''
}
render() {
const { items } = this.state; // destructure state, so create a variable called items that is equal to this.state.items essentially takes the items in the state variable items and copies them to a new const variable called items
return (
<View style={{height:600}}>
<Agenda
items={items} //send those items to Agenda Component via prop
loadItemsForMonth={this.loadItems.bind(this)}
selected={this.props.day}
renderItem={this.renderItem.bind(this)}
renderEmptyData={this.renderEmptyDate.bind(this)}
rowHasChanged={this.rowHasChanged.bind(this)}
onRefresh = {() => { this.setState({refeshing : true})}}
refreshing = {this.state.refreshing}
refreshControl = {null}
pastScrollRange={1}
futureScrollRange = {3}
theme = {
{
agendaTodayColor: '#28F1A6',
agendaKnobColor: '#28F1A6',
dotColor: '#28F1A6',
selectedDayBackgroundColor: '#28F1A6',
todayTextColor: '#28F1A6',
}
}
/>
);
}
//On application loads, this will get the already saved data and set the state true when it's true.
componentDidMount() {
AsyncStorage.getItem("key").then((newItems) => {
//assuming JSON.parse returns an array of JSON objects, if not change
//items to items: {} the way you had it originally in state
this.setState({ items: JSON.parse(newItems) }) //add the items or data to state variable called items
});
}
}
// давайте представим, что это ваш компонент повестки дня
class Agenda extends Component {
state = {
items: this.props.items, //get the items that were passed above using items={item} and assign them to a state variable items here in the Agenda component
}
render() {
const { items } = this.state; //destructure state
return(
<div>
//put this where you want to render the data in the AgendaComponent you said you were using a Text Component so it would like this
items.map(item => {
return (
//assuming that item object comes with an id if not you must add a unique key so you can call a func that updates a count variable and returns it
<Text key={item.id}>{item.name} {item.date}</Text>
)
})
)
</div>
}
}
запомните.функция карты почти как цикл for.Он будет перебирать каждый элемент в массиве и делать то, что есть в операторе возврата для каждого элемента массива.
Надеюсь, это поможет.
Обновление
В предыдущем решении, которое я написал, была ошибка.Компонент Agenda устанавливал состояние до того, как он фактически получил реквизиты, и не обновлял состояние при обновлении реквизитов.
По какой-то причине componentWillReceiveProps никогда не получал никаких реквизитов.Однако componentDidUpdate получил реквизиты после одного обновления.Проблема в том, что вы не можете setState в componentDidUpdate(), иначе вы получите бесконечный цикл.Так что вот работа вокруг.Если у кого-то есть лучшее решение, пожалуйста, отредактируйте мой ответ или отправьте новый ответ с этим.
Следующее только для вашего компонента повестки дня.Больше ничего не нужно обновлять
Сначала обновите декларацию своего состояния следующим образом:
state = {items: this.props.items, // получите элементыкоторые были переданы выше, используя items = {item} и назначить их переменным состояния элементов здесь в компоненте Agenda}
этому:
state = {
items: null, //changed this to null bc the array gave a nested array later on making it more difficult to traverse through
haveItems: false //this will be used later to check if there are items available in props to update state
};
В вашей функции render() измените это
render () {const {items} = this.state;// destruct state return (// поместите это туда, где вы хотите визуализировать данные в AgendaComponent, который, как вы сказали, вы используете текстовый компонент, поэтому он хотел бы этот items.map (item => {return (// при условии, что объект item приходитс идентификатором, если нет, вы должны добавить уникальный ключ, чтобы вы могли вызвать функцию, которая обновляет переменную count и возвращает ее {item.name} {item.date})}))}}
на это:
const { items, haveItems } = this.state; //destructure state
if (this.props.items.length === 0) {
this.setState({ haveItems: false }); //if there aren't any items in props then you have no items so set haveItems to false
} else {
//if you already have items then you already handled those items so do nothing
if (haveItems) {
} else {
//handle the items
this.setState({
haveItems: true, //set this to true bc now you have items
items: this.props.items //set items in state to the items in props, you will get one array with all of your objects
});
}
}
return (
<div>
<div>
{haveItems
{* if you have items then map them the question mark means true, if not display nothing, the colon : means false
? items.map(item => {
return (
<ul key={item.id}>
<li>{item.name}</li>
<li>{item.date}</li>
</ul>
);
})
: null}
</div>
</div>
);
}
}
Извините за длинный ответ, но я надеюсь, что это то, что вам нужно.