Question

我是新来的反应者，主要从事Java工作。因此，我正在构建一个多页应用程序，在其中以不同格式在多个页面中显示相同数据。因此，我只需要从API 一次中获得的原始json数据在一个单独的类中，并且我想在多个地方重用它。我之所以陷入困境，是因为我看到的所有教程都是作为渲染的组件传递的，我没有任何要渲染的组件，因为该类仅用于获取API数据。也许我看错了方式。如果有人可以帮助，这是我现在的两节课：

在我正在获取数据的班上：

var apidata = [];

export default class GetData extends Component {
constructor() {
    super();

    axios.get("https:...")
        .then(response => {
            response.data.map(eachObject => {
                apidata.push(eachObject);
                // console.log(eachObject);
            })
        });
}


render() {
    return (
        // Dont know what to return here
        {/*<App data={this.state}/>*/}
    );
}

}

在我要使用数据的课程中：

export default class Home extends Component {
constructor() {
    super();
    console.log(this.state.data);
}

componentWillMount() {
    this.setState({data : GetData.apiData});
}

componentDidMount() {
}

state = {data: []};

render() {
    return (
        <div>
            <div style={margin_top}>
                <table className="table table-dark">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Department</th>
                    </tr>
                    </thead>
                    <tbody>
                    {this.state.data.map(eachObject =>
                        <tr>
                            <th scope="row">{count++}</th>
                            <td>{eachObject.department}</td>
                        </tr>
                    )}
                    </tbody>
                </table>
            </div>
        </div>
    )
    }
}

Answer 1

获取GetData.apiData将无济于事，因为该变量是异步填充的

this.setState({data : GetData.apiData});

因此，好的选择是使用Redux。

React将在数据更改时有效地更新和呈现正确的组件。（在您的情况下为apiData）

https://redux.js.org/basics/exampletodolist这将帮助您

Answer 2

如果要在多个组件中重复使用API数据服务。

只返回您的数据服务，您的数据服务应返回如下承诺：

GetData.js

export function data() {
   return axios.get(`https://jsonplaceholder.typicode.com/users`)
       .then(res => res.data) 
}

，然后在您的组件中，

import {data} from './GetData';

componentDidMount() {
    data().then(data=>{ 
      this.setState({
        persons: data
      })
   });
}

或导出数据获取调用组件，如下所示：

export default class DataLoader extends Component {
  state = { data: [] };
  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data =>
        this.setState(() => {
          return { data };
        })
      );
  }
  render() {
    return this.props.render(this.state.data);
  }
}

，然后在您的组件中使用它，如下所示：

 <DataLoader
  render={data => {
    return (
      <div>
        <ul>
          {data.map(el => (
            <li key={el.id}>{el.title}</li>
          ))}
        </ul>
      </div>
    );
  }}
/>

working demo 使用了react上下文，如果需要，请使用

解析API数据并在多个地方使用它

2 个答案: