Добавление элемента в список в React native

Question

Итак, я пытаюсь сделать простой компонент добавления в React native и в настоящее время борюсь с различными ошибками. Я новичок в React, и многое из этого мне кажется магией c. По сути, у меня есть форма, которая должна принять значение и добавить его в массив / список. Прямо сейчас я делаю это с помощью некоторого учебника, но получаю ошибки. Я пробовал это с установкой const [test, setTest] = useState ([1, 2, 3]), но в этом тоже были некоторые ошибки. Это мой код ниже, поэтому, пожалуйста, если вы могли бы помочь мне. Текущая ошибка: компонент изменяет неконтролируемый ввод текста типа для управления. Элементы ввода не должны переключаться с неконтролируемого на управляемый (или наоборот). Выберите между использованием контролируемого или неконтролируемого входного элемента в течение срока службы компонента. И отображение массива также является проблемой для меня в части render (), так что, если вы могли бы, пожалуйста, дать мне подсказку там же. Спасибо!

import React, { useState } from 'react';
import { ListItem, Button } from 'react-native-elements'



export default class AddNote extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.state = {
        niz: ['test1', 'test2']
      }
    }


    handleChange(event) {    this.setState({value: event.target.value});  }
    handleSubmit(event) {
      event.preventDefault();
      const {niz} = this.state;
      const newItem = 'test3';

      this.setState({
        niz:[...this.state.niz, newItem]
      })
      console.log(niz);
    }

    render() {
      return (
          <div>
            {/* {
           niz.map(note => <ListItem
              title={note.title}
              bottomDivider
              chevron
            />)
        } */}
        <form onSubmit={this.handleSubmit}> 
            <header> Add Note </header>
            <input type="text" value={this.state.value} onChange={this.handleChange} />       
          <input type="submit" value="Add" /> 
        </form>
        </div>
      );
    }
  }

Answer 1

В React native нет тегов div и form, которые заменяются на представления и ввод текста, импортированные из реагировать-native.

Я изменил ваш код, внес необходимые изменения, проверьте его один раз:

import React, { useState } from 'react';
import { ListItem } from 'react-native-elements';
import {View,Button, TextInput} from 'react-native'; 

export default class AddNote extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          text:"",
        niz: ['test1', 'test2']
      }
    }


    handleSubmit =()=> {
        if(this.state.text !=""){
            this.state.niz.push(this.state.text);
            this.setState({
                niz:this.state.niz
            })
        }

      console.log(this.state.niz);
      this.setState({
          text:""
      })
    }

    render() {
      return (
          <View style={{marginTop:"30%"}}>
           {
    this.state.niz.map((l, i) =>{
        return(
            <View>
                <ListItem title={l}
                 bottomDivider
                 chevron
                 />
                </View>
          )
    })
  }
  <View style={{justifyContent:"center",alignItems:"center",marginTop:"5%"}}>
  <TextInput style={{ width:"50%",height: 30, borderColor: "gray", borderWidth: 2,borderRadius:20,paddingLeft:20,paddingRight:20,marginBottom:10 }}
  placeholder="Enter text to be added" placeholderTextColor="gray" onChangeText={(text) => this.setState({ text })} value={this.state.text}/>
   <Button title ="Submit" onPress={this.handleSubmit}></Button>
  </View>

        </View>
      );
    }
  }

После ввода «test3» в качестве ввода и подачи ввода

Надеюсь, это поможет!