反应本机 SectionList 不更新答案

【问题标题】：React native SectionList not updating反应本机 SectionList 不更新
【发布时间】：2020-05-04 01:54:09
【问题描述】：

我正在开发一个示例应用程序作为学习 react-native 的一部分，其中它有一个 ColorForm 接受来自 TextInput 的值，并在 Props 的帮助下，数据将被发送到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
  }
})

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

【问题讨论】：

你能在博览会小吃中分享代码，这样我就可以在那里找到并在有任何问题时恢复
你也能显示来自 ColorButton.js 的代码吗？在此之前，尝试将this.setState({backgroundColor}) 更改为this.setState({backgroundColor: backgroundColor})

标签： react-native react-native-sectionlist

【解决方案1】：

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

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

【讨论】：