React-Native - я не могу использовать строку состояния в качестве нового элемента списка - PullRequest
Новая
       8

React-Native - я не могу использовать строку состояния в качестве нового элемента списка

0 голосов
/ 28 октября 2018

Вчера я начал изучать React Native.К сожалению, я сталкиваюсь с некоторыми трудностями в самом начале.Я пытался написать простой список, который содержит некоторые входные данные, и когда пользователь нажимает кнопку «Добавить новый», список будет расширяться с новым элементом.Когда я пытаюсь использовать переменную this.state.newName в новом элементе списка, React выдает мне исключение:

"Инвариантное нарушение: объекты недопустимы как дочерний элемент React (найдено: объект с ключами{dispatchConfig, _targetInst, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances, тип, цель, currentTarget, eventPhase, bubbles, cancellable, timeStamp, defaultPrevented, isTrusted, nativeEvent} вместо. Вместо этого вы должны использовать массив, а не дочерний объект, а затем использовать массив."

Мой код действительно прост: 

export default class HelloWorldApp extends Component {

constructor() {
    super();
    this.state = {
        newName: "",
        peopleList: [
            { key: "1", name: "Jonathan", lastname: "Smith" },
            { key: "2", name: "Tomasz", lastname: "Kowalski" },
            { key: "2", name: "Adrian", lastname: "Jakubowski" },
        ]

    }
}

addNew() {
    let newName = this.state.newName;
    this.setState({
         peopleList: [...this.state.peopleList, {key: newName, name: newName, lastname: "Added"}]
    });
}

render() {
    return (
        <View style={styles.peopleList}>
            <Text>People I know:</Text>
            <TextInput
                value={this.state.newName}
                onChange={(text) => this.setState({newName: text})}
            />
            <Button title="Add new!" 
                onPress={() => this.addNew()}
            />
            <FlatList
                data={this.state.peopleList}
                renderItem={({ item }) => <Text style={styles.item}>Imie: {item.name} Nazwisko: {item.lastname}</Text>} />

        </View>
    );
}

}

Когда я не использую this.state.newName, просто передайте строку вроде:

let newName = "Adam";

Будет работать просто отлично.В чем может быть причина?

1 Ответ

0 голосов
/ 28 октября 2018

Измените это: 

onChange={(text) => this.setState({newName: text})}

На: 

onChangeText={(text) => this.setState({newName: text})}

Правильная опора onChangeText

Вы можете увидеть ее использование в здесь

...