reactjs 如何在React中将GET的结果作为 prop 发送？

ubby3x7f 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(125)

我有一个Promise（GET），它将返回一个数字。我想用这个来自响应的数字设置一个状态，并将其作为props发送到另一个组件。现在，我遇到的问题是，在接收props的组件呈现后，Promise得到了解决，但我看不到值。代码如下所示：

interface State {
  number: string;
}

export class Form extends Component<State> {
  
  constructor(props: Props) {
    super(props);
    this.state = {
      number: config.EMPTY_STRING,
    };
  }
  
  async componentDidMount() {
    //fetch function sample
    await fetch
    .get(
      config.api.uri.getNumber(params)
      )
      .then(response => {
        this.setState({ number: response.data })
        return response
      })
      .catch(catchError);
      
  }
  
  render(): ReactElement {
    const { state: { number }} = this;
    console.log(number);
    return <Component />
  }
}

然后我把这个组件（C1）中的数字作为 prop 发送到另一个组件（C2）中，并在那里再次记录。我看到C2首先用未定义的数字呈现，然后C1用响应中的数字呈现。我应该怎么做才能把数字发送到C2？
我对类不太感兴趣，我认为它可以在函数组件中与useEffect一起正常工作，但我不能改变这一点。
非常感谢您的耐心和善良提前.阿迪

reactjs

来源：https://stackoverflow.com/questions/75522354/how-to-send-the-result-of-a-get-as-a-prop-in-react

1条答案

按热度按时间

bvjxkvbb1#

代码内嵌的注解-

export class Form extends Component<State> {

您可以通过直接在类中设置初始状态来简化构造函数-

state = {
    number: config.EMPTY_STRING,
  }

不要把async..await和.then处理程序混在一起，而是把等待表达式的结果赋给一个变量，然后直接使用它--

async componentDidMount() {
    try {
      const {data} = await fetch.get(config.api.uri.getNumber(params))
      this.setState({ number: data })
    }
    catch (error) {
      catchError(error)
    }
  }

在render方法中，检查number状态是否存在。如果设置了，则呈现依赖子组件，否则呈现一个空片段。不要声明类型脚本可以自动推断的类型-

render() {
    const { state: { number }} = this;
    return number
      ? <Component number={number} /> // number is set
      : <></>                         // number is not set
  }
}

或者，您可以呈现<Loading />组件

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 如何在React中将GET的结果作为 prop 发送？

1条答案

相关问题

热门标签

最新问答