Question

我构建了一个react组件，它将Json文件导入数组以映射结果。我在另一个组件中需要该数组。我不知道是否必须在新组件中构建此组件，或者是否有一种方法可以导出所需的数组（数据）。阵列源每4秒更新一次。

感谢您的帮助。

我的第一个组成部分是：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';


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

    componentDidMount() {
        const fetchData = () => {
            axios
            .get('http://localhost:8888/dp_8/fuente/procesos_arbol.json')
            .then(({ data })=> {
                this.setState({
                    data: data
                });
                console.log(data);
            })
            .catch(()=> {console.log('no recibido');});
        };
        fetchData();
        this.update = setInterval(fetchData, 4000);
    } //  final componentDidMount


    render() {
        const initialData = this.state.data.map((el) => {
            return (
        <p>id={ el.id } | name - { el.name } | padre - {el.parent}</p>
      );
        });


        return (<div className="datos_iniciales">
      { initialData }
      </div>);
    }

}


ReactDOM.render(
  <Ramas />,
  document.getElementById('container')
);

Answer 1

制作一个可以包含这两个组件的顶级组件。

Ramas组件中的

- ＆gt;

const updatedData = setInterval(fetchData, 4000);
this.props.datasource(updatedData);

撰写新的顶级组件 - ＆gt;

class TopComponent Extends React.Component{
  state = {data: ''}

  handleDataUpdate = (updatedData) => {
     this.setState({data: updatedData});
  }

  render = () => {
      <Ramas datasource={this.handleDataUpdate}>
          <SecondComponent updatedData={this.state.data}>
      </Ramas>
  }

}

现在来自 SecondComponent updatedData 道具，您可以获得最新数据

顺便说一句，我写的是ES7语法

Answer 2

如果您有父组件，则应将函数从它传递给此组件作为prop。该函数将设置状态和数据将以ReactJS想象的方式流动。

例如，您可以调用而不是this.setState this.props.jsonToArray 在jsonToArray中，你应该调用setState，它将把数据传递给那个第二个组件。

将动态数组从React组件导出到另一个组件

2 个答案: