Question

我创建了一个自定义组件，该组件从父组件中获取颜色名称，并以父组件中的状态更新该颜色。当前，在完成所有代码之后，它不会保存新的颜色，因此不会更新状态。

这是我正在构建的本机android应用程序。我看过ReactNative文档中的列表和文本输入。我也在堆栈溢出中寻找解决方案

设置一个React Native项目。这是我的父组件

class HomePage extends Component {
  constructor(props) {
    super(props); 
    this.state = { 
      backgroundColor: "blue",
      availableColors: [
             {name: 'red'}
           ]
     }

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

  }

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

  }

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

  }

  renderHeader = ()=>{
    return(
    <ColorForm  onNewColor={this.newColor} />
    )

  }

  render() { 

    const { container, row, sample, text, button } = style
    const { backgroundColor, availableColors } = this.state

    return (
<View style={[container,{backgroundColor}, {flex: 1}]}   >
           <FlatList  

        data={availableColors}
        renderItem={
                    ({item}) => 
                            <ColorButton 
                                backgroundColor={item.name} 
                                onSelect={(color)=>{this.changeColor(color)}}> 
                                {item.name} 
                            </ColorButton>}
        keyExtractor={(item, index) => index.toString()}
        ListHeaderComponent={this.renderHeader}
        >
    </FlatList>
</View>

     );
  }
}

这是ColorForm组件的代码

class ColorForm extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            txtColor:'',
         }

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

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

        })
    }
    render() { 
        const {container, txtInput, button} = style
        return ( 
        <View style={container}>

            <TextInput style={txtInput}
             placeholder="Enter a color"
             onChangeText={(txtColor)=>this.setState({txtColor})}
             value={this.state.txtColor}></TextInput>

            <Text 
            style={button}
            onPress={this.submit}>Add</Text>

        </View> );
    }


}

及以下是ColorButton组件的代码

export default ({backgroundColor, onSelect=f=>f}) => {
    const {button, row, sample, text} = style
    return (
      <TouchableHighlight onPress={()=>{onSelect(backgroundColor)}} underlayColor="orange" style={button}>
        <View style={row}>
        <View style={[sample,{backgroundColor}]}></View>
        <Text style={text}>{backgroundColor}</Text>
      </View>
      </TouchableHighlight>
    )
}

导入和样式表是标准设置，不会影响代码，因此我选择不显示它们。

编辑：添加博览会小吃here。

预期行为：

当我在ColorForm组件上按“ ADD”时，它应该采用该颜色并将其添加到this.state.availableColor数组中，因此在ColorButton组件中可见。当我触摸按钮时，应该进行更改

当前行为：

当我输入一种颜色并按添加时，它将在ColorButton组件中使一个空按钮-而不是我在ColorForm组件中输入的颜色中输入的颜色。

编辑：添加博览会小吃here。

Answer 1

您的状态正在更新，但FlatList未更新。因为您的Flat =中的data = {availableColors}并没有发生变化，但是状态正在发生变化。尝试添加extraData

标记属性，用于告知列表重新呈现（因为它实现了PureComponent）。如果您的renderItem，Header，Footer等函数中的任何一个都依赖于数据道具之外的任何东西，请将其粘贴在此处并对其进行不变处理。

尝试一下

<FlatList  
  extraData={this.state.backgroundColor}

更新后的答案 问题在于此功能 newColor（color）

const availableColors = [
  ...this.state.availableColors,
  color
]

您刚刚收到一串颜色，但是您已经定义了这样的对象{name：'red'}

请使用此代码

 newColor(color){
const availableColors = [
  ...this.state.availableColors,
  {name: color}
]
this.setState({
  availableColors
})

  }

示例的小吃链接：https://snack.expo.io/@mehran.khan/healthy-cake-state-sample

还将导出默认设置添加到主要组件以消除启动错误

export default class HomePage extends Component {

应用预览

Answer 2

以您现在使用的方式使用setState（）时遇到很多问题。我建议您以这种方式使用setState（）和回调：

this.setState((previousState, currentProps) => {
    return { ...previousState, foo: currentProps.bar };
});

这是the article谈论的话题之一。

setState（）并不总是立即更新组件。它可能批量更新或将更新推迟到以后。

来自React网站setState()。

将自定义道具发送到自定义组件失败

2 个答案: