Question

我现在还很陌生，所以我感到有些琐碎。因此，我想做的是将数据从父组件传递给子组件。我的代码看起来像这样。

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => console.log("Result is", res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick />
            </Dialog>
    );
}

所以基本上我现在只是控制台记录结果，但是我想以某种方式将res传递给包装在Dialog组件中的ReactSlick组件。如何在ReactSlick组件中使用res数据？

Answer 1

尝试将存储在父状态下的数据作为属性传递给子元素。从API接收数据后更改状态。更改父级的data属性将传播到子级。

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => this.setState({data: res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick data={this.state.data} />
            </Dialog>
    );
}

在父组件的构造函数中：

constructor(){
  this.state = {data: null}
}

Answer 2

尝试先使用async / await获取资源，然后将其传递给子组件

#define GETMEMBERFUNCTIONPOINTER(identifier) (&std::remove_pointer_t<decltype(this)>::identifier)

Answer 3

您可能需要有状态的组件才能实现此目的。将响应保存到状态，然后从状态获取资源值，以将其传递到Slick组件中。

export class TestComponent extends Component {
  constructor() {
    super();
    this.state = {
      res: null
    };
    this.getData = this.getData.bind(this);
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    let { getData } = this.props;
    if (getData.code === "ON") {
      Codeapi(getData._id[0])
        .then(res => this.setState({ res })) // saving res to state
        .catch(error => console.log(error)); // use catch for errors from promises
    }
  }

  render() {
    const { res } = this.state;
    return (
      <Dialog
        key={key}
        side="left"
        onImageClick={this.handleClick}>
        <ReactSlick res={res} />
      </Dialog>
    )
  }
}

在响应中从父容器到子容器的API调用中传递数据

3 个答案: