将数组分配为反应组件状态属性？

Question

尝试将非空数组设置为组件状态属性时（在初始化时，在组件构造函数中），例如：

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

控制台返回此错误：

在这种环境下，assign 的来源必须是一个对象。这 错误是一种性能优化，不符合规范

如果数组是空的，那可以工作（但是一旦你尝试重新分配一个非空数组，它就会出错）

所以这行得通：

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

直到你这样做

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

此时会返回上一个错误...

我不明白。 javascript 数组不应该也是对象类型，因此可以用作状态属性值吗？

我在 Android 设备上使用最新的 react-native 版本 (0.45.1) 对其进行了测试。

state.results 对象仅在这样的列表视图中使用：

   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

你不应该改变状态。 而不是做

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

你应该这样做

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