javascript - 向自定义组件发送自定义道具失败

问题描述

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

这是针对我正在构建的 react-native android 应用程序。我查看了平面列表和文本输入的 ReactNative 文档。我也查看了堆栈溢出的解决方案

设置一个反应原生项目。这是我的父组件

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>
    )
}

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

编辑：在这里添加世博小吃。

预期行为：

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

当前行为：

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

编辑：在这里添加世博小吃。

标签： javascriptreactjsreact-nativereact-native-androidreact-native-flatlist

解决方案

您的状态正在更新，但 FlatList 没有更新。因为你的 data={availableColors} 在 flatlist 没有改变，但你的状态正在改变。尝试添加额外数据

用于告诉列表重新渲染的标记属性（因为它实现了 PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data 属性之外的任何内容，请将其粘贴在这里并一成不变地对待它。

尝试这个

<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 {

应用预览

javascript - 向自定义组件发送自定义道具失败

问题描述

解决方案

推荐阅读