Реагировать на родной SectionList не обновляется - PullRequest
Новая
       20

Реагировать на родной SectionList не обновляется

2 голосов
/ 17 января 2020

Я разрабатываю пример приложения как часть обучающегося реагирующего, в котором оно имеет ColorForm, которое принимает значение от TextInput, и с помощью Prop с данные будут отправлены на Main представление, например App. App имеет SectionList, который не обновляется новыми значениями, введенными из ColorForm.

Ниже приведен исходный код, который я использовал:

Приложение . 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
  }
})

Может кто-нибудь помочь мне разобраться в проблеме? Заранее спасибо.

1 Ответ

1 голос
/ 17 января 2020

Похоже, что состояние не обновляется в вашем методе newColor, так как availableColors - это массив, вы можете использовать операцию pu sh для добавления нового значения в массив, обновите код, как показано ниже, и он будет работать. 

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