Question

我目前正在使用React Native开发应用程序。

此试用版应用程序具有父功能组件和子类组件。

我想使用道具从父母向孩子发送状态值。

即使我使用/vobs/proj/foo.c@@/main/motif/4，状态值也不会改变...

我该如何解决我的问题？

代码如下：

父母

setState()

孩子

import React, { useState } from "react";
import { View } from "react-native";

import Child from "../components/Child";

export default function Parent() {
  const [texts, setTexts] = useState("AAA");

  return (
    <View>
      <Child texts={texts} />
    </View>
  );
}

节点：12.18.3

反应原生：4.10.1

博览会：3.22.3

Answer 1

实际上，您实际上需要将回调函数传递给子级，然后该子级将在父级上设置状态。

父母

import React, { useState } from "react";
import { View } from "react-native";

import Child from "../components/Child";

export default function Parent() {
  const [texts, setTexts] = useState("AAA");

  return (
    <View>
      <Child setText={setTexts} />
    </View>
  );
}

孩子

import React from "react";
import { Button } from "react-native";

class Child extends React.Component {
    
  render() {
    return (
      <Button
        title="ADD"
        onPress={() => {
          this.props.setText(dataYouWantToAdd);
        }}
      />
    );
  }
}
export default Child;

Answer 2

您应该传递一个回调函数，以让父级处理所需的更改。只需将数据传递回回调中的父级即可。如果仍然有错误，请尝试此操作，让我知道

父母

import React, { useState } from "react";
import { View } from "react-native";

import Child from "../components/Child";

export default function Parent() {
  const [texts, setTexts] = useState("AAA");

  const handleText = (val)=>{
    setTexts(val)
  }

  return (
    <View>
      <Child texts={texts} handleChange={(texts)=>handleText(texts)}/>
    </View>
  );
}

孩子

import React from "react";
import { Button } from "react-native";

class Child extends React.Component {

  render() {
    return (
      <Button
        title="ADD"
        onPress={() => {
          this.props.handleChange(this.state.texts);
        }}
      />
    );
  }
}
export default Child;

为什么不能使用setState更改状态值？

2 个答案: