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

Question

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

这是我正在构建的反应本机 android 应用程序。我查看了 flatlist 和 textinput 的 ReactNative 文档。我也查看了 Stack overflow 的解决方案

设置一个 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 没有更新。因为你的 data={availableColors} in flatlist is not changing but your state is changing 。尝试添加 extraData

一个标记属性用于告诉列表重新呈现（因为它实现了 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
})

  }

小吃 link 例如：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() does not always immediately update the component. It may batch or defer the update until later.

来自 React 网站 setState().

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

Sending custom props to custom component is failing

javascript

reactjs

react-native

react-native-android

react-native-flatlist