Javascript 重新呈现按钮按下时的道具数据

更新#2：我在JSFIDLE上发布了和的代码。对不起，我没有早一点这么做

更新：我使用的建议重新构建了代码。我现在正在尝试更新组件

TimelineDay

中的道具

timelineData

，并重新渲染

链接屏幕

类。然而，在我的测试中没有发生任何事情。我对状态/道具非常陌生，因此任何建议都将不胜感激

非常新的React/JS（新手警报）。让我们进入我问题的实质部分

Class

LinksScreen

包含带有道具和外部组件的flexbox视图

import TimelineDay from '../components/TimelineDay.js';

export default class LinksScreen extends React.Component {
constructor() {
    super();

    this.onPress1 = this.onPress1.bind(this);
    this.onPress2 = this.onPress2.bind(this);
    this.onPress3 = this.onPress3.bind(this);

    this.state = {
        dayOne: [ . . ],
        dayTwo: [. . ],
        dayThree: [. . ],
    }
}

页眉中的按钮具有自定义的

onPressX

功能，可使用相应的

第一天

、

第二天

或

第三天

数据更新

timelineData

道具

render() {
    return (
        <View style={styles.container}>
        <View style={styles.dayBar}>
            <TouchableHighlight onPress={this.onPress1}>
                <View>
                    <MaterialCommunityIcons name="numeric-1-box-outline" size={34} color="#FFD344"/>
                     <Text style={styles.day1Text}>Fri, 29th</Text>
                </View>
            </TouchableHighlight>
           </View>

我猜，通过调用setState（），还可以调用重新渲染。然而，这正是我在测试中难以观察到的

这是包含

TimelineDay

组件和

timelineData

道具的方法，我希望在单击按钮和道具重新分配后重新渲染这些道具

<View style={styles.eventScheduleView}>
     <TimelineDay ref={(timelineData) => {
         timelineData = this.state.timelineData}}>
     </TimelineDay>
</View>

{
timelineData=this.state.timelineData}>

这可能是一个非常补救的问题，但我（和我所在大学的hackathon领导团队）需要额外的澄清

随时扔掉任何有用的资源（流量、状态等）。谢谢大家!

this.state= {
    whatDay: props.string
};

如果要在此处设置组件的初始状态，但不确定要使用props.string执行什么操作，可以将其设置为空字符串

“按更新道具上的测试操作…”，实际上您正在尝试更新状态，无法使用setState更新道具

多花点时间复习react的基本原理会对你有所帮助

如果要在此处设置组件的初始状态，但不确定要使用props.string执行什么操作，可以将其设置为空字符串

“按更新道具上的测试操作…”，实际上您正在尝试更新状态，无法使用setState更新道具

---

多花点时间复习react基础知识会对你有所帮助。

你正在做的一些事情有点奇怪。我敢猜测，你的按扭在什么时候起作用

<TouchableHighlight onPress={{whatDay: "dayOne"}}>

并将每个按钮传递给各自的按钮。或者，您可以在每个按钮中绑定onPress，并使onPress接受一个变量

onPress = (day) => {
  this.setState({
     whatDay: day
  });
};

将其本身绑定

<TouchableHighlight onPress={this.onPress.bind(this, "dayThree"}>

---

您至少应该考虑应用Flux或Redux模式，Flux更容易用小东西识别。使用其中一种模式将允许将所有状态存储在未链接到组件的某个位置，从而使事情更易于管理。

您正在做的一些事情有点奇怪。我敢猜测，你的按扭在什么时候起作用

<TouchableHighlight onPress={{whatDay: "dayOne"}}>

并将每个按钮传递给各自的按钮。或者，您可以在每个按钮中绑定onPress，并使onPress接受一个变量

onPress = (day) => {
  this.setState({
     whatDay: day
  });
};

将其本身绑定

<TouchableHighlight onPress={this.onPress.bind(this, "dayThree"}>

---

您至少应该考虑应用Flux或Redux模式，Flux更容易用小东西识别。使用其中一种模式将允许将所有状态存储在与组件未链接的位置，使事情更易于管理。

在减少逻辑后，我建立了三个单独的onPress操作：this.onPress1=this.onPress1.bind（this）；this.onPress2=this.onPress2.bind（this）；this.onPress3=this.onPress3.bind（this）；每个“onPress”函数都将尝试使用适当的数组（在父级this.state中定义）设置

时间线

timelineData子属性：this.state={第二天：[……]，第三天：[……]，}，然后设置

timelineData

属性：onPress1=（）=>{this.setState（{timelineData:this.state.dayOne}）很抱歉未格式化的评论，仍然习惯于StackOverflow。我编辑了我的原始帖子以包含您的架构建议。如果您有时间，我希望您查看它。谢谢！您将timelineData传递给了ref，该属性的用途只是引用该组件，而不是传递数据。设置状态确实会导致重新呈现呃，但是如果数据不放在可见的地方，什么也不会改变。最好将数据放在“this”而不是state上，并且只从this更新state。state应该保留为只导致可见更改的内容。通常，flux或redux可以解决此问题。在减少逻辑后，我建立了三个单独的onPress操作：this.onPress1=this.onPress1.bind（this）；this.onPress2=this.onPress2.bind（this）；this.onPress3=this.onPress3.bind（this）；每个“onPress”函数将尝试使用适当的数组（在父级this.state中定义）设置时间线：this.state={dayTwo:[…]，dayTwo:[…]，}然后设置

timelineData

prop:onPress1=（）=>{this.setState（{timelineData:this.state.dayOne}）很抱歉未格式化的评论，仍然习惯于StackOverflow。我编辑了我的原始帖子以包含您的架构建议。如果您有时间，我希望您查看它。谢谢！您将timelineData传递给了ref，该属性的用途只是引用该组件，而不是传递数据。设置状态确实会导致重新呈现呃，但如果数据不放在可见的地方，则不会发生任何变化。最好将数据放在“this”上，而不是状态上，并且只从该状态更新状态。状态应保留为仅导致可见变化的内容。通常情况下，flux或redux会解决此问题。您能发布这两个方面的完整代码吗

<TouchableHighlight onPress={this.onPress.bind(this, "dayThree"}>