React Native 状态在更改值后不更新值

Question

我是 React-Native 及其 states 的新手，在这里我遇到了一个问题（使用虚拟数据但我的问题是一样的）我想要实现的是获取最新的 JSONARRAY 从 state 获取，基于当我点击第一个按钮时的按钮点击，它应该只有 return [{"one":"oneKey"},{"key":"mutatedFruit"}] 和其他按钮的类似方法以及任何帮助表示赞赏我附上了我的

expo snack code here

Answer 1

编辑：根据您的评论，听起来您的问题是您不希望多次添加相同的值。在那种情况下，这应该可以解决它：

export default class App extends React.Component {
  state= {
    selectedPosition:0,
  }

  render() {
    const value = data[this.state.selectedPosition].joinedUsers
    value[0]["key"] = "mutatedFruit"

    return ( 
      <View style={styles.container}>
        <Button title='ONE'
        onPress={()=>this.setState({selectedPosition:0})}></Button>
        <Button title='TWO'
        onPress={()=>this.setState({selectedPosition:1})}></Button>
        <Button title='THREE'
        onPress={()=>this.setState({selectedPosition:2})}></Button>
        <Button title='FOUR'
        onPress={()=>this.setState({selectedPosition:3})}></Button>
      <Text>{JSON.stringify(value)}</Text>
      </View>
    );
  }
}

Answer 2

希望以下代码对您有所帮助，

import * as React from 'react';
import { Text, View,Button, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';
 const data = [
   {"joinedUsers":[{"one":"oneKey"}],"key":"mango"}
 ,{"joinedUsers":[{"two":"twoKey"}],"key":"apple"}
 ,{"joinedUsers":[{"three":"threeKey"}],"key":"banana"}
 ,{"joinedUsers":[{"four":"fourKey"}],"key":"kiwi"}];
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props){
    super(props);
    this.state={
      selectedPosition:0,
     valueArr : []
    }
  }


  componentDidMount(){
    let newVal = [];
    newVal.push(data[0].joinedUsers[0]) 
    newVal.push({"key":"mutatedFruit"})
    this.setState({valueArr:newVal})

  }


  setValues = (position) => {
      let newVal = [];
       newVal.push(data[position].joinedUsers[0]) 
    newVal.push({"key":"mutatedFruit"})
    this.setState({valueArr:newVal})
  }

  render() {
    const value = data[this.state.selectedPosition].joinedUsers
    value.push({"key":"mutatedFruit"})

    return ( 
      <View style={styles.container}>
        <Button title='ONE'
        onPress={()=>this.setValues(0)}></Button>
        <Button title='TWO'
        onPress={()=>this.setValues(1)}></Button>
        <Button title='THREE'
        onPress={()=>this.setValues(2)}></Button>
        <Button title='FOUR'
        onPress={()=>this.setValues(3)}></Button>
      <Text>{JSON.stringify(this.state.valueArr)}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    flexDirection:'column'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

React Native 状态在更改值后不更新值

React Native states not updating value after changing value

facebook

render

ios

react-native

react-native-android