Affectation d'un tableau en tant que propriété d'état de composant de réaction?

Question

Lorsque vous essayez de définir un tableau non vide comme une propriété de l'État composant (à l'initialisation, dans le constructeur de composants), comme par exemple:

this.state = { results: ['apple','orange'] } //in the component constructor 

cette erreur est renvoyée dans la console:

dans cet environnement, les sources pour Assigner DOIVENT être une erreur object.This est une optimisation des performances et non conformes spec

Si le tableau est vide cependant, que fonctionne (mais dès que vous essayez de réaffecter un tableau non vide, il bug)

Alors cela fonctionne:

this.state = { results: [] } //in the component constructor 

jusqu'à ce que vous

this.setState({results: ['apple','orange'] }) //in a component function 

à point auquel l'erreur précédente serait retourné ...

Je ne comprends pas. Les tableaux javascript ne sont-ils pas supposés être de l'objet type et donc utilisables comme valeur de propriété d'état?

Je l'ai testé avec la dernière version réag-native (0.45.1), sur un appareil Android.

L'objet state.results est utilisé que dans un listview comme celui-ci:

const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) 

    render() { 
    return (

    <ListView 
       style={{position: 'absolute', width: 100, backgroundColor: 'white', zIndex: 3}} 
       keyboardShouldPersistTaps='always' 
       initialListSize={15} 
       enableEmptySections={true} 
       dataSource={ds.cloneWithRows(this.state.results)} 
       renderRow={(rowData, sectionId, rowId, highlightRow) => 
       <RowWrapper styles={styles.rowWrapper} > 
        <TouchableOpacity 
        activeOpacity={0.5} 
        onPress={() => {this.onItemPress(this.state.results[rowId])}} 
        > 
        <Text style={styles.rowText}>{rowData}</Text> 
        </TouchableOpacity> 
       </RowWrapper> 
       } 
      /> 
    ) 
    } 

    class RowWrapper extends Component { 
     constructor (props) { 
     super(props) 
     this.defaultTransitionDuration = 500 
     this.state = { 
      opacity: new Animated.Value(0) 
     } 
     } 
     componentDidMount() { 
     Animated.timing(this.state.opacity, { 
      toValue: 1, 
      duration: this.defaultTransitionDuration 
     }).start() 
     } 
     render() { 
     return (
      <TouchableWithoutFeedback> 
      <Animated.View style={{...this.props.styles, opacity: this.state.opacity }}> 
       {this.props.children} 
      </Animated.View> 
      </TouchableWithoutFeedback> 
     ) 
     } 
    } 

Answer 1

Vous ne devriez pas muter l'état. au lieu de faire

this.setState({results: ['apple','orange'] }) 

Vous devriez faire

var resultsArr = this.state.results.slice(); 
var newResults = ['apple','orange']; 
resultsArr.concat(newResults); or resultsArr.push(newResults); 
this.setState({results: resultsArr })