Question

在我的项目中，我正在我的子组件中循环显示卡片，并将我的状态更新为我在卡片上激活“向右滑动”事件的状态。父母的状态通过将最喜欢的卡添加到阵列来跟踪所有收藏夹。

我将一个函数（updatestate）从父组件App传递给子级Main，该子级允许子级调用.setState()和以父状态附加到数组。

但是，当我在子组件中激活eventhandler onSwipedRight时，父级的状态会按照计划使用新卡进行更新，但<Card>中Main以下的任何内容都不会自动呈现对于下一张牌，应该如此。如果我点击屏幕，那么下一张卡片/图片只会呈现。

有什么想法吗？我是否缺少一些绑定或需要做一些componentDidMount或其他什么，所以即使在我激活更新父状态的事件处理程序之后，子组件Main中的代码也会呈现？

基本上， React中是否有一个工具可以确保渲染或至少等待渲染？（在我的案例中设置父母状态的事件后处理）

collection = imagedata;
//collection is the data (local JSON) i'm looping thru via .map in Main Component

const RootStack = StackNavigator(
  {
    Main: {
      screen: Main}
  }
);

export default class App extends Component<{}> {
    constructor(props) {
      super(props);
      this.state = {
        favoritesList: []
      };
    }

  updateArr=(itemname, url)=>{this.setState({ favoritesList: [...this.state.favoritesList, {"item_name":itemname, "url":url}]})};

  render() {
      return <RootStack screenProps={{appstate: this.state,
                                    updatestate: this.updateArr}}
      />;
    }
  }

class Main extends React.Component {

  render() {
    var updatestate = this.props.screenProps.updatestate;

    const contents = collection.map((item, index) => {
        return (
            <Card key={index}
                  onSwipedRight={() => {updatestate(item.item_name,item.url)}}
            >
              <View> //THIS and anything after <Card> doesn't render for the next card automatically if I do 'onSwipedRight'
                <Image
                    source={{uri: item.url}} />
               </View>
            </Card>
        )
      },this);

      return (
      <View>
            <CardStack>

              {contents}

            </CardStack>
      </View>
        );
    }
}

（缩写）项目结构：

App
 |__ Rootstack
       |
       |__Main

更新（更多信息）： 为了测试事件处理程序，我添加了一个不设置父级状态的函数，并且在事件处理程序上调用了<Card> - 它完美地运行并且子组件<Card>完美呈现。看起来它是从父级向子级传递的updatestate函数，该函数调用.setState()上游，由于某种原因导致Child在事件处理程序之后不渲染/不完成渲染。 / p>

class Main extends React.Component {
  render() {

    var updatestate = this.props.screenProps.updatestate;

    var newfunc = (a, b) => {console.log('a:', a, 'b:', b)};

      const contents = collection.map((item, index) => {
        return (
            <Card key={index}
                  newfunc(item.item_name,item.item_name);}}
                  // onSwipedRight={() => {updatestate(item.item_name,item.url); }}
                  >

Answer 1

如果需要根据以前的状态设置组件的状态，则应使用

this.setState((prevState, props) => {})

在您的情况下，哪个应该是

this.setState((prevState, props) => {
  return {
    favoritesList: [
      ...prevState.favoritesList,
      {"item_name":itemname, "url":url}
    ]
  };
})

有关setState

的更多信息

React Native - 子组件将在被调用的子事件更新父状态后完成呈现

1 个答案: