Ошибка функции карты ReactJS - PullRequest
Новая
       8

Ошибка функции карты ReactJS

0 голосов
/ 24 августа 2018

После того, как я нажму кнопку отправки, запрос отправляется в базу данных Neo4j, и ответ отправляется обратно. Кроме того, при нажатии кнопки другая функция отправляет эти данные в функцию графика {this.state.submit && this.displayElements()}. Однажды в функции Graph я пытаюсь отобразить график, но React говорит, что карта не определена. Тем не менее, консоль журнала реквизита изнутри График показывает: {data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}. Я пробовал другую комбинацию перед отображением, но, похоже, ничего не работает (this.props.nodes, this.state.action и т. Д.).

Функция отображения (отправка данных через реквизиты в виде узлов) 

displayElements = () => {
        const {data:{loading, error, action}} = this.props;
        console.log(this.props);
        if(loading) {
            return <option disabled>Loading...</option>;
          }else if (error){
            return<p>Error!</p>;
          }
          return (

     <Graph nodes={this.data}/>  <--Sending data to Graph via props as nodes
            );
          }

График Функция 

class Graph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {nodes: this.props};
    console.log(this.props + "graph")
  }

  componentDidMount() {
    this.force = d3.forceSimulation(this.state.nodes)
      .force("charge",
        d3.forceManyBody()
          .strength(this.props.forceStrength)
      )
      .force("x", d3.forceX(this.props.width / 2))
      .force("y", d3.forceY(this.props.height / 2));

    this.force.on('tick', () => this.setState({nodes: this.state.nodes}));
  }

  componentWillUnmount() {
    this.force.stop();
  }

    render() {
    return (
        <svg width={this.props.width} height={this.props.height}>
        {this.state.nodes.action.map((node, index) =>(
            <circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
        ))}
      </svg>
    );
  }
}

export default Graph;

1 Ответ

0 голосов
/ 24 августа 2018

карта для массива, но ваши проходящие объекты {data:{action: "Changed", timestamp: 1499348050, object: Array(1), Second: Array(1), __typename: "action", …}

Решение может быть Object.keys(this.state.nodes.action).map(()=>{...}

{Object.keys(this.state.nodes.action).map((node, index) =>(
     <circle r={node.r} cx={node.x} cy={node.y} fill="red" key={index}/>
))}
...