React Native - 文本不更新数组值
React Native - Text not updating with array value
import React, {useState} from 'react';
import { FlatList, Text, View} from 'react-native';
import {styles, styleBox} from './components/styles';
import Slider from '@react-native-community/slider';
export default function App() {
const [values, setValues] = useState([
{key: 'borderTopLeftRadius', display: 'Top Left', value: 0},
{key: 'borderTopRightRadius', display: 'Top Right', value: 0},
{key: 'borderTopStartRadius', display: 'Top Start', value: 0},
{key: 'borderTopEndRadius', display: 'Top End', value: 0},
{key: 'borderBottomLeftRadius', display: 'Bottom Left', value: 0},
{key: 'borderBottomRightRadius', display: 'Bottom Right', value: 0},
{key: 'borderBottomStartRadius', display: 'Bottom Start', value: 0},
{key: 'borderBottomEndRadius', display: 'Bottom End', value: 0}
]);
const valueChangedHandler = (val, item) => {
var index = values.findIndex(value => value.key == item.key);
var newValues = values;
newValues[index].value = val;
setValues(newValues);
console.log(values[index].value);
}
return (
<View style={styles.container}>
<View style={styleBox(values)}>
</View>
<FlatList
data={values}
renderItem={({item}) => (
<View style={styles.Item}>
<Text style={styles.Label}>{item.display}</Text>
<Slider
style={styles.slider}
value={item.value}
onValueChange={value => valueChangedHandler(value, item)}
minimumValue={0}
maximumValue={100}
step={1}
/>
<Text>{item.value}</Text>
</View>
)}
/>
</View>
);
}
调整滑块会正确更改数组中的值。 (可以通过console.log确认)。
但是滑块后面的文本没有改变,即使值本身改变了。
是因为 Flatlist 还是我需要触发重新渲染?
试试这个方法,
const valueChangedHandler = (val, item) => {
var index = values.findIndex(value => value.key == item.key);
var newValues = values;
newValues[index].value = val;
//spread operator will return new array with updated values
setValues([...newValues]);
}
import React, {useState} from 'react';
import { FlatList, Text, View} from 'react-native';
import {styles, styleBox} from './components/styles';
import Slider from '@react-native-community/slider';
export default function App() {
const [values, setValues] = useState([
{key: 'borderTopLeftRadius', display: 'Top Left', value: 0},
{key: 'borderTopRightRadius', display: 'Top Right', value: 0},
{key: 'borderTopStartRadius', display: 'Top Start', value: 0},
{key: 'borderTopEndRadius', display: 'Top End', value: 0},
{key: 'borderBottomLeftRadius', display: 'Bottom Left', value: 0},
{key: 'borderBottomRightRadius', display: 'Bottom Right', value: 0},
{key: 'borderBottomStartRadius', display: 'Bottom Start', value: 0},
{key: 'borderBottomEndRadius', display: 'Bottom End', value: 0}
]);
const valueChangedHandler = (val, item) => {
var index = values.findIndex(value => value.key == item.key);
var newValues = values;
newValues[index].value = val;
setValues(newValues);
console.log(values[index].value);
}
return (
<View style={styles.container}>
<View style={styleBox(values)}>
</View>
<FlatList
data={values}
renderItem={({item}) => (
<View style={styles.Item}>
<Text style={styles.Label}>{item.display}</Text>
<Slider
style={styles.slider}
value={item.value}
onValueChange={value => valueChangedHandler(value, item)}
minimumValue={0}
maximumValue={100}
step={1}
/>
<Text>{item.value}</Text>
</View>
)}
/>
</View>
);
}
调整滑块会正确更改数组中的值。 (可以通过console.log确认)。
但是滑块后面的文本没有改变,即使值本身改变了。
是因为 Flatlist 还是我需要触发重新渲染?
试试这个方法,
const valueChangedHandler = (val, item) => {
var index = values.findIndex(value => value.key == item.key);
var newValues = values;
newValues[index].value = val;
//spread operator will return new array with updated values
setValues([...newValues]);
}