Я не могу сохранить детали, когда нажата кнопка Добавить на странице EventForm должна отображаться на странице EventList в реагировать родной

Question

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

EventForm js Я ввожу в него текст, который имеет название, местоположение и поле для заметок, но при нажатии кнопки добавления не отображается в плоском списке.

class EventForm extends Component {

    state = {
        title: null,
        date: '',
    };
    handleAddPress = () => {
     saveevents(this.state)
    //    console.log('saving events:', this.state);
          .then(()=> this.props.navigation.goBack());
    }
    // handlePress() {
    //     this.props.onBtnPress()
    //   }
    // }

    handleChangeTitle = (text) => {
        this.setState({ title: text });
    }
    handleChangeLocation =(text) => {
        this.setState({location: text});
    }

    render() {

        return (
            <View
                style={{
                    flex: 1
                }}
            >
                <View style={styles.fieldContainer}>
                    <TextInput
                        style={styles.text}
                        placeholder="Name"
                        spellCheck={false}
                        value={this.state.title}
                        onChangeText={this.handleChangeTitle}

                    />
                    <TextInput
                        style={styles.text}
                        placeholder="Enter your Location"
                        spellCheck={false}
                        value={this.state.location}
                        onChangeText={this.handleChangeLocation}

                    />
                    <AutoExpandingTextInput
                        placeholder="Write your Notes here"
                        spellCheck={false}
                        style={[styles.default, {height: Math.max(35, this.state.height)}]}
                        value={this.state.text}
                    />
                </View>
                <TouchableHighlight
                onPress ={() =>this.handleAddPress.bind(this)}
                    // onPress={this.handleAddPress}
                    style={styles.button}

                >
                    <Text style={styles.buttonText}>Add</Text>
                </TouchableHighlight>

            </View>

EventList JS, где я хотел бы отобразить динамический текст, введенный в EventForm, должен появиться в плоский список.Я сохраняю содержимое плоского списка в db json-файле и вызываю его в EventList.

     const styles = StyleSheet.create({
          list: {
            flex: 1,
            paddingTop: 20,
            backgroundColor: '#A9A9A9'

          },

        });

        class EventList extends Component {
          state = {
            events: [],
          }
          componentDidMount() {

             //getEvents().then(events => this.setState({ events }));

            const events = require('./db.json').events;
            this.setState({ events });

          }

          render() {
            return [

              <FlatList
                key="flatlist"
                style={styles.list}
                data={this.state.events}
                renderItem={({ item, seperators }) => (<EventCard events= 
 {item} />)}
                keyExtractor={(item, index) => index.toString()}

              />,

Мой db json-файл - это то, что я ввел вручную. Данные, которые вводятся динамически, должны сохраняться в dbФайл json и должен отображаться в плоском списке.

        {
            "events":[
                {
                    "name":"chandu",
                    "date":"15-06-2018 ",
                    "location":"Sydney",
                    "content":"How are you..?",
                    "id":"05dafc66-bd91-43a0-a752-4dc40f039144"
                },
                {
                    "name":"bread",
                    "date":"15-07-2018 ",
                    "location":"Sydney",
                    "content":"I bought bread..?",
                    "id":"05dafc66-bd91-43a0-a752-4dc40f039145"
                }
        ]
        }

Я ожидаю, что любой текст, введенный в форму, должен сохранить и показать меня в Плоском списке, который находится в файле EventList.Пожалуйста, помогите, если у вас есть какое-либо решение для этого.

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

Я ожидаю любой текст, введенный вформу следует сохранить и показать мне в Flatlist, который находится в файле EventList.Пожалуйста, помогите, если вы получите какое-либо решение для этого.Я добавил предупреждающее сообщение при нажатии, чтобы показать, нажата ли она или нет.

Answer 1

Ваши EventForm и EventList являются двумя отдельными компонентами без каких-либо общих реквизитов.

Предполагается, что вы обновляете файл db.json (используя методы чтения / записи файлов) из компонента EventsForm, все еще в EventsList, данные выбираются только один раз на componentDidMount.

Вам нужно будет передать данные для EventList в качестве реквизита или сохранить в состоянии.Если вы держите его в подпорках, то вы должны обновить значение состояния, используя какой-либо метод жизненного цикла, такой как getDerivedStateFromProps подпорки или что-то подобное.

Редактировать : я бы предложил использовать глобальное состояниебиблиотека управления, такая как redux , для сохранения данных, введенных в компоненте EventForm, вместо чтения / записи в файл.

Вы можете сохранить данные, отправив action inваш EventForm компонент.Позже получите доступ к этим данным в вашем EventList компоненте, используя

this.props.your_db_name

Вы можете сохранить эти данные даже при уничтожении приложения, используя redux-persist

Если вы все еще хотитепродолжить чтение / запись файла, вы можете посмотреть эту библиотеку реагировать-родной-фс