Question

我正在尝试将数据作为道具传递给封装的组件。

我需要更改该日期，因为它是父母中更改的日期。

但是既不直接传递（如textCaption），也不以函数生成的方式传递-不允许在父级状态更改时更新子级中的数据。

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this._statData = props.textData;
    this._dynData = props.funcData;

  }

  render() {
    console.log(`Render MyComponent with static=${this._statData} dynamic=${this._dynData()}`)
    return (
      <Text>static: { this._statData} / dyn: { this._dynData()}</Text>
    )
  }
}

const Container = () => {
  const [textCaption, setTextCaption] = React.useState("Textual")
  const [funcCaption, setFuncCaption] = React.useState("Functional");
  console.log(`textCaption: ${textCaption}, funcCaption: ${funcCaption}`)
  return (
    <View style={styles.container}>
      <Button title="Change" onPress={()=>{ 
        console.log(`Update dynamic prop`)
        setTextCaption(textCaption + "!")
        setFuncCaption(funcCaption + "!")
      }}/>
      <MyComponent textData={textCaption} funcData={()=>funcCaption}/>
    </View>
  )
}

export default class App extends React.Component {
  render() {
    return <Container/>
  }
}

https://snack.expo.io/SJYuSqIEL

我的方法有什么问题？

更新

感谢@Ian Vasco提供以下答案-它展示了如何使用功能样式来使用React组件。

但是对我来说，现在的问题是为什么传递给()=>funcCaption的{{1}}总是返回<MyComponent textData={textCaption} funcData={()=>funcCaption}/>的初始值？

但是当我更改时，请使用funcCaption-每次都会显示新的生成值！

Answer 1

因此，您提供的示例中的问题是您正在使用构造函数，该构造函数将使用陈旧的值，然后您不再进行分配。我喜欢您开始使用React Hooks，所以我将重构您不必要的基于类的组件。这是例子

import * as React from 'react';
import { Text, View, StyleSheet , Button} from 'react-native';

const MyComponent = (props) => {

  React.useEffect(() => {
    console.log(`Render MyComponent with static=${props.textData} dynamic=${props.funcData}`)
  }, [props])
    return (
      <Text>static: { props.textData} / dyn: { props.funcData}</Text>
    )
}

const Container = () => {
  const [textCaption, setTextCaption] = React.useState("Textual")
  const [funcCaption, setFuncCaption] = React.useState("Functional");
  console.log(`textCaption: ${textCaption}, funcCaption: ${funcCaption}`)
  return (
    <View style={styles.container}>
      <Button title="Change" onPress={()=>{ 
        console.log(`Update dynamic prop`)
        setTextCaption((prev) => prev + "!")
        setFuncCaption((prev) => prev + "!")
      }}/>
      <MyComponent textData={textCaption} funcData={funcCaption}/>
    </View>
  )
}

export default class App extends React.Component {
  render() {
    return <Container/>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

因此，如上所述，我将MyComponent重构为功能组件。与Container的逻辑相同。如果您不熟悉useEffect钩子，则此函数将在依赖项更改时触发，在这种情况下为props，因此您可以看到值已更改。

可以改进的另一件事是，在Container中，您将状态设置为setState(state + "!")，这可能会引起问题，因为无法用最新值更新state。正确的方法是使用状态为previous的回调，如代码中所示。

通过道具传递动态数据

1 个答案: