Блог

Я хочу принять пользовательский ввод и обновить свою гистограмму в соответствии со значением оси Y, введенным пользователем. Однако моя функция updateArray в настоящее время обновляет гистограмму. Есть идеи?

 import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, TextInput, TouchableOpacity } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'

export default function App() {

        const fill = 'rgb(134, 65, 244)'
        const data = [50,10]
        const [newData, setnewData] = useState(null)

        useEffect(() => {

        })
        const updateArray = () => {
          data.concat(newData)
        }
        return (
          <View>
            <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
            </BarChart>
            <TextInput
                   style={styles.textArea}
                   underlineColorAndroid="transparent"
                   numberOfLines={1}
                   autoCapitalize="none"
                   value={newData}
                   onChangeText={(newData) => setnewData(newData)}
                 />
                 <TouchableOpacity style={styles.buttons} onPress={updateArray}>
                      <Text>Apply</Text>
                    </TouchableOpacity>

        </View>
        )
    }
  

Приведите свои данные в состояние. затем обновите свое состояние.

 import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Dimensions, Text, TextInput, TouchableOpacity } from 'react-native';
import { BarChart, Grid } from 'react-native-svg-charts'

export default function App() {

        const fill = 'rgb(134, 65, 244)'
        const [data, setData] = useState([50,10])
        const [newData, setnewData] = useState(null)

        useEffect(() => {

        })
        const updateArray = () => {
          data.concat(newData)
        }
        const updateArray = useCallback(()=>{
           setData(data => data.conncat(newData))
        }, [setData, newData])

        return (
          <View>
            <BarChart style={{ height: 200 }} data={data} svg={{ fill }} contentInset={{ top: 30, bottom: 30 }}>
                <Grid />
            </BarChart>
            <TextInput
                   style={styles.textArea}
                   underlineColorAndroid="transparent"
                   numberOfLines={1}
                   autoCapitalize="none"
                   value={newData}
                   onChangeText={(newData) => setnewData(newData)}
                 />
                 <TouchableOpacity style={styles.buttons} onPress={updateArray}>
                      <Text>Apply</Text>
                    </TouchableOpacity>

        </View>
        )
    }