React-Native - 我不能使用状态字符串作为新的列表元素
React-Native - I can not use State string as new list element
昨天开始学习React Native。不幸的是,我一开始就遇到了一些困难。
我试图编写简单的列表,其中包含一些输入,当用户单击 "Add new" 按钮时,列表将扩展为新项目。当我尝试在新列表元素中使用 this.state.newName 变量时,React 抛出异常:
" Invariant Violation: Objects are not valid as a React child (found:
object with keys {dispatchConfig, _targetInst, isDefaultPrevented,
isPropagationStopped, _dispatchListeners, _dispatchInstances, type,
target, currentTarget, eventPhase, bubbles, cancelable, timeStamp,
defaultPrevented, isTrusted, nativeEvent}). If you meant to render a
collection of children, use an array instead."
我的代码真的很简单:
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";
它会工作得很好。可能是什么原因?
改变这个:
onChange={(text) => this.setState({newName: text})}
收件人:
onChangeText={(text) => this.setState({newName: text})}
正确的道具是onChangeText
具体用法见here
昨天开始学习React Native。不幸的是,我一开始就遇到了一些困难。 我试图编写简单的列表,其中包含一些输入,当用户单击 "Add new" 按钮时,列表将扩展为新项目。当我尝试在新列表元素中使用 this.state.newName 变量时,React 抛出异常:
" Invariant Violation: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, nativeEvent}). If you meant to render a collection of children, use an array instead."
我的代码真的很简单:
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";
它会工作得很好。可能是什么原因?
改变这个:
onChange={(text) => this.setState({newName: text})}
收件人:
onChangeText={(text) => this.setState({newName: text})}
正确的道具是onChangeText
具体用法见here