反应本机 SectionList 不更新

Question

我正在开发一个示例应用程序作为学习 react-native 的一部分，其中有一个 ColorForm 接受来自 TextInput 的值并在 Prop 的帮助下s，数据会被发送到Main视图，比如App。 App 有一个 SectionList 不更新 ColorForm.

的新值输入

以下是我使用过的源代码：

App.js

import React, { Component } from 'react'
import {
  StyleSheet,
  SectionList,
  Text,
  Alert
} from 'react-native'
import ColorButton from './components/ColorButton'
import ColorForm from './components/ColorForm'

class App extends Component {

  constructor() {
    super()
    this.state = {
      backgroundColor: 'blue',
      availableColors: ['red', 'green', 'yellow', 'pink']
    }

    this.changeColor = this.changeColor.bind(this)
    this.newColor = this.newColor.bind(this)
  }

  changeColor(backgroundColor) {
    this.setState({ backgroundColor })
  }

  newColor(color) {
    const colors = [
      ...this.state.availableColors,
      color
    ]

    this.setState(colors)
  }

  render() {
    const { backgroundColor, availableColors } = this.state

    return (
      <SectionList style={styles.list}
        backgroundColor={backgroundColor}
        sections={[{ title: "Header", data: availableColors }]}
        renderSectionHeader={({ section }) => (
          <ColorForm onNewColor={this.newColor} />
        )}
        renderItem={({ item }) => (
          <ColorButton backgroundColor={item} onSelect={this.changeColor} />
        )}
        keyExtractor={(item, index) => index}
      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20
  },
  list: {
    marginTop: 40
  }
})

export default App

ColorForm.js

import React, { Component } from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput
} from 'react-native'
import PropTypes from 'prop-types'

export default class ColorForm extends Component {
  constructor() {
    super()
    this.state = {
      txtColor: ''
    }

    this.submit = this.submit.bind(this)
  }

  submit() {
    this.props.onNewColor(this.state.txtColor.toLowerCase())
    this.setState({ txtColor: '' })
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.txtInput}
          placeholder="Enter a color..."
          onChangeText={(txtColor) => this.setState({ txtColor })}
          value={this.state.txtColor}
        />
        <Text style={styles.button} onPress={this.submit}>Add</Text>
      </View>
    )
  }
}

ColorForm.propTypes = {
  onNewColor: PropTypes.func.isRequired
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'lightgrey',
    height: 70,
    paddingTop: 20
  },
  txtInput: {
    flex: 1,
    margin: 5,
    padding: 5,
    borderWidth: 2,
    fontSize: 20,
    borderRadius: 5,
    backgroundColor: 'snow'
  },
  button: {
    backgroundColor: 'darkblue',
    margin: 5,
    padding: 5,
    alignItems: 'center',
    justifyContent: 'center',
    color: 'white',
    fontSize: 20
  }
})

谁能帮我解决这个问题？提前致谢。

Answer 1

您的方法 newColor 中似乎没有更新状态，因为 availableColors 是一个数组，您可以使用推送操作向数组添加新值更新代码如下，它会起作用。

newColor(color) {
    console.log('adding', color)
    const colors = this.state.availableColors
    colors.push(color)
    this.setState(colors)
}

反应本机 SectionList 不更新

React native SectionList not updating

react-native

react-native-sectionlist