3

我对反应还很陌生，我被困在我觉得微不足道的事情上。所以我想做的是我想将数据从父组件传递给子组件。我的代码看起来像这样。

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 数据？

4

3 回答 3

1

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

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}
}
于 2019-04-02T02:58:36.523 回答
0

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

async getData(key) {
      let { getData } = this.props;
      let res = null;
      if (getData.code === "ON") {
          try{
            res = await Codeapi(getData._id[0]);
          } catch(e) {
            console.log(e);
          }
      }
      return (
          <Dialog
              key={key}
              side="left"
              onImageClick={this.handleClick}>
              <ReactSlick res/>
              </Dialog>
      );
    }
于 2019-04-02T02:59:01.743 回答
0

您可能需要一个有状态的组件来实现这一点。保存对状态的响应，然后从状态中获取 res 值以将其传递给 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>
    )
  }
}
于 2019-04-02T03:00:56.243 回答