我正在尝试将一个在我的React App中工作的组件转换为React Native。然而,我在ios模拟器中得到了这个错误: nsnumber类型的JSON值'0‘无法转换为nsstring’以前有人遇到过这个问题吗?这似乎与其他所有人的风格有关。但我还没有做好造型。如果你需要更多信息,请告诉我,谢谢。
import React from 'react';
import { Text, View, Button, Picker } from 'react-native';
const baseMin = [];
for (var i=0; i <= 60; i++) {
baseMin.push(i);
}
const baseSec = [];
for (var i=0; i <= 60; i++) {
baseSec.push(i);
}
const displayMinutes = baseMin.map((minute) =>
<Picker.Item key={minute.toString()} value={minute} label={minute} />
)
const displaySeconds = baseSec.map((second) =>
<Picker.Item key={second.toString()} value={second} label={second} />
)
class RandomTimer extends React.Component {
state = {
baseMinutes: 0,
baseSeconds: 0,
varMinutes: 0,
varSeconds: 0,
minutes: 0,
seconds: 0,
random: 0
};
generate() {
var min = (this.state.baseSeconds) - (this.state.varSeconds);
var max = (parseInt(this.state.varSeconds)) + (parseInt(this.state.baseSeconds));
const randomInt = Math.floor(Math.random() * (max - min + 1) + min);
this.setState({ random: randomInt });
this.reset();
}
go() {
this.timer = setInterval(() => {
if (this.state.seconds == this.state.random) {
clearInterval(this.timer);
} else {
this.setState({ seconds: this.state.seconds + 1 })
}
}, 1000)
}
stop = () => {
clearInterval(this.timer);
}
reset = () => {
this.setState({ minutes: 0, seconds: 0 })
this.stop();
}
render() {
const varMin = [];
for (var i=0; i <= this.state.baseMinutes; i++) {
varMin.push(i);
}
const displayBaseMin = varMin.map((minute) =>
<Picker.Item key={minute.toString()} value={minute} label={minute} />
)
const varSec = [];
for (var i=0; i <= this.state.baseSeconds; i++) {
varSec.push(i);
}
const displayBaseSec = varSec.map((second) =>
<Picker.Item key={second.toString()} value={second} label={second} />
)
const { baseMinutes, baseSeconds, varMinutes, varSeconds, minutes, seconds } = this.state;
return (
<View>
<Text>settings</Text>
<Picker onValueChange={
(itemValue) => this.setState({
baseSeconds: itemValue
})} selectedValue={baseMinutes}>
{displayMinutes}
</Picker>
<Text>:</Text>
<Picker onValueChange={
(itemValue) => this.setState({
baseSeconds: itemValue
})} selectedValue={baseSeconds}>
{displaySeconds}
</Picker>
<Text>VarTime +-</Text>
<Picker onValueChange={
(itemValue) => this.setState({
baseSeconds: itemValue
})} selectedValue={varMinutes}>
{displayBaseMin}
</Picker>
<Text>:</Text>
<Picker onValueChange={
(itemValue) => this.setState({
baseSeconds: itemValue
})} selectedValue={varSeconds}>
{displayBaseSec}
</Picker>
<Button onPress={this.generate} title='new' />
<Text>Timer</Text>
<Text>{minutes}:{seconds}</Text>
<View>
<Button onPress={this.go} title='go' />
<Button onPress={this.stop} title='stop' />
<Button onPress={this.reset} title='reset' />
</View>
</View>
)
}
}
export default RandomTimer;发布于 2020-04-05 12:11:23
你唯一做错的是Picker label应该是一个字符串,但你传递的是一个数字,只要将你的{minute}替换为{minute.toString()},将{second}替换为{second.toString()},你就需要在每次使用的地方更改这个标签。
并将go()更改为go = () =>,将generate()更改为generate = () =>
希望这能有所帮助!
https://stackoverflow.com/questions/61036331
复制相似问题