javascript - 从 react 组件传递数据

Question

我有一个获取 API 数据并将其设置为数组的 GetData.js 组件。我想在多个其他组件中访问该数组数据并以多种不同方式对其进行操作。

例如，我希望能够做这样的事情:

import APIdata from './GetData';

var data = APIdata.object;

var result = [];

if (data) {
  for (var i = 0; i < data.length; i++) {
    if (data.form_values["6f71"] === "KeyWord") {
      result.push(data)
    }
  }
}

Answer 1

您看到的是容器组件、 Prop 和状态的相当直接的使用。

这是一个人为的例子:

import React, {Component} from 'react';
import OtherComponent1 from './OtherComponent1';
import OtherComponent2 from './OtherComponent2';

class GetDataComponent extends Component {
  constructor() {
    super(props);
    this.state = {
      data: []
    }
  }

  fetchMyData() {
    const resultingArray = ...
    this.setState({data: resultingArray});
  }

  componentDidMount() {
    this.fetchMyData();
  }

  render() {
    return (
      <div>
        <OtherComponent1 someArrayProp={this.state.data}/>
        <OtherComponent2 differentArrayProp={this.state.data}/>
      </div>
    );
  }
}

export default App;

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class OtherComponent1 extends Component {
  render() {
    return (
      <div>
        The someArrayProp: {this.props.someArrayProp}
      </div>
    );
  }
}

OtherComponent1.propTypes = {
  someArrayProp: PropTypes.array;
}

export default App;

import React, {Component} from 'react';
import PropTypes from 'prop-types';

const OtherComponent2 = (props) => (
  <div>
    The differentArrayProp: {props.differentArrayProp}
  </div>
);

OtherComponent2.propTypes = {
  differentArrayProp: PropTypes.array;
}

export default App;