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

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

这是我正在构建的react原生android应用程序。我已经看过了关于flatlist和textinput的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>

     );
  }
}

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


}

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组件的代码

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>

     );
  }
}

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


}

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

下面是ColorButton组件的代码

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>

     );
  }
}

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


}

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组件上按ADD时，它应该采用该颜色并将其添加到this.state.availableColor数组中，因此在ColorButton组件中可见。当我按下按钮时，它会做出改变

当前行为：

当我输入颜色并按add时，它在ColorButton组件中生成一个空按钮，而不是我在ColorForm组件中输入的颜色

---

编辑：添加世博快餐

您的状态正在更新，但平面列表未更新。因为flatlist中的数据={availableColors}没有更改，但您的状态正在更改。 尝试添加

一个标记属性，用于通知列表重新呈现，因为它实现了PureComponent。如果您的renderItem、Header、Footer等函数依赖于data prop之外的任何内容，请将其粘贴在此处并进行不变的处理

试试这个

您只收到一个颜色字符串，但定义了如下对象{name:'red'}

请使用此代码

小吃链接示例：

还将导出默认值添加到主组件，以消除启动错误

应用程序预览

---

我在使用setState时遇到了很多问题，就像您现在使用的方式一样。我建议您以这种方式使用带有回调的setState：

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

这是其中一个关于它的讨论

setState并不总是立即更新组件。可能 批处理或将更新推迟到以后

---

来自react网站。

Hey@Mehran，我查看了extraData道具，虽然它确实有意义，但结果仍然与上面相同，即实际行为仍然相同。是否有任何云服务可以承载代码片段，以便在答案中添加工作原型。这样，人们就会更好地理解我说的话。我做的零食。我如何将其嵌入到这里。对不起，如果我听起来像个傻瓜的话。我是个新来的本地人@IPutuYogaPermana@SarthakBatra答案更新与零食链接。请检查并投票，如果需要，请更正我的答案helpful@MehranKhan是的，你的回答很有帮助。非常感谢。尽管如此，我还是觉得在我的问题上加上答案是有意义的，我也会给你评分的。。。这样一来，下一个寻找解决方案的人就不会因为我在代码中犯了错误而感到困惑。听起来不错？