单击"刷新图形"按钮

Question

我正试图在我的应用程序中创建一个按钮，该按钮将使用react native按钮组件刷新图中的随机数据(使用react native图表工具包制作(。我的代码如下：

import * as React from 'react';
import {useState} from 'react';
import { StyleSheet, Text, View, Switch, Dimensions, Button, Alert } from 'react-native';
import { LineChart } from "react-native-chart-kit";
import Header from "./components/Header";
import Colors from "./constants/colors";

export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
function refresh_data(){
...
//Code here?
...
}
return (
<View style = {styles.screen}>
<View style = {styles.button}>
<Button
title="Refresh"
color={Colors.primary}
onPress={() => refresh_data}
/>
</View>
<View style = {styles.graph}>
<View style = {{flex: 1}}>
<Text style = {styles.text}>Bezier Line Chart</Text>
</View>
<View style={{flex: 2}}>
<LineChart
data={{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
data: [
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100                
]
}]
}}
width={Math.floor(Dimensions.get("window").width * 0.6)} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
screen: {
flex: 1,
alignItems: 'stretch',
justifyContent: 'center'
},
button: {
alignSelf: 'center',
justifyContent: 'center',
flex: 1
},
graph: {
flex: 3,
alignItems: 'center',
justifyContent: 'center'
}
});

我是Javascript和React的新手，所以这可能是一个非常基本的问题，我想学习更多。我尝试过的一个想法是使用location.reload((重新加载整个页面，但这不是我想要的(我知道，因为它在应用程序的另一部分有一个开关，每当点击时都会刷新数据，我只是不知道怎么做(。提前感谢您的帮助！

Answer 1

将一些初始的"随机"数据添加到组件状态，并在refresh_data中单击处理程序，用新的"随机的"数据设置状态。

此外，设置onClick回调的正确语法是onClick={refresh_data}或onClick={() => refresh_data()}

export default function App() {
const [randomData, setRandomData] = useState([
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100                
]);
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
function refresh_data(){
setRandomData([
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100,
Math.random() * 100                
])
}
return (
<View style = {styles.screen}>
<View style = {styles.button}>
<Button
title="Refresh"
color={Colors.primary}
onPress={refresh_data}
/>
</View>
<View style = {styles.graph}>
<View style = {{flex: 1}}>
<Text style = {styles.text}>Bezier Line Chart</Text>
</View>
<View style={{flex: 2}}>
<LineChart
data={{
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{ data: randomData }]
}}
width={Math.floor(Dimensions.get("window").width * 0.6)} // from react-native
height={220}
yAxisLabel="$"
yAxisSuffix="k"
yAxisInterval={1} // optional, defaults to 1
chartConfig={{
backgroundColor: "#e26a00",
backgroundGradientFrom: "#fb8c00",
backgroundGradientTo: "#ffa726",
decimalPlaces: 2, // optional, defaults to 2dp
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
},
propsForDots: {
r: "6",
strokeWidth: "2",
stroke: "#ffa726"
}
}}
bezier
style={{
marginVertical: 8,
borderRadius: 16
}}
/>
</View>
</View>
</View>
);
}

不过有很多重复，所以我也会创建一个随机数据实用程序：

const createRandomData = (length = 10) => Array(length)
.fill()
.map(() => Math.random() * 100);

const createRandomData = (length = 10) => Array(length).fill().map(() => Math.random() * 100);
console.log(createRandomData(3));
console.log(createRandomData(6));
console.log(createRandomData(12));

新用途：

const [randomData, setRandomData] = useState(createRandomData(12));
...
setRandomData(createRandomData(12));