Получить данные для графа дерева с редуксом

Question

Я начинаю использовать реаги и редуксы. Я использую Ax ios для получения таких данных от API:

[
  {
    name: "Alex Statham",
    people: [
      {
        name: "Jason Statham",
        people: [
          {
            name: "Lyna Statham"
          },
          {
            name: "John Statham"
          }
        ]
      },
      {
        name: "Will Statham",
        people: [
          {
            name: "Michael Statham"
          }
        ]
      }
    ]
  }
];

Я помещаю их в данные Array и хочу поместить эти данные в React Tree Graph, но он просто работает с такими данными:

{
  "name": "Alex Statham",
  "people": [
    {
      "name": "Jason Statham",
      "people": [
        {
          "name": "Lyna Statham"
        },
        {
          "name": "John Statham"
        }
      ]
    },
    {
      "name": "Will Statham",
      "people": [
        {
          "name": "Michael Statham"
        }
      ]
    }
  ]
}

После того, как я получил первые данные, я поместил их в это:

const initialState={
    listFamilyTree: [],
}

Я могу отобразить эти данные, которые я кодирую, как вы, но все еще не работает. Вот код, который я использую:

render(){
    const { person } = this.props;
    const {familytree}= this.props;
    const result = familytree[0];
    return (
      <div className="Login">
        <form >
          <FormGroup controlId="maBN" bsSize="normal">
            <ControlLabel><b>patientID</b></ControlLabel>
            <FormControl
              autoFocus
              type="text" name="maBN" placeholder="Enter patientID" value={this.state.thongTinPerson.maBN} onChange={this.handleMaBNChange}
            />
          </FormGroup>
          <FormGroup controlId="firstName" bsSize="normal">
            <ControlLabel><b>firstName</b></ControlLabel>
            <FormControl
              autoFocus
              type="text" name="firstName" placeholder="Enter firstname" value={this.state.thongTinPerson.firstName} onChange={this.handleFirstNameChange}
            />
          </FormGroup>
          <FormGroup controlId="lastName" bsSize="normal">
            <ControlLabel><b>lastName</b></ControlLabel>
            <FormControl
              type="text" name="lastName" placeholder="Enter lastname" value={this.state.thongTinPerson.lastName} onChange={this.handleLastNameChange}
            />
          </FormGroup>
          <FormGroup controlId="address" bsSize="normal">
            <ControlLabel><b>Address</b></ControlLabel>
            <FormControl
              type="text" name="address" placeholder="Enter address" value={this.state.thongTinPerson.address} onChange={this.handleAddressChange}
            />
          </FormGroup>
          <Button block bsSize="normal"  className="button1" ten="button1" onClick={this.timBenhNhanTheoFirstName} >
            Tìm
          </Button>
          <Button block bsSize="normal"  className="button" ten="button2" onClick={this.themBenhNhan} >
            Thêm
          </Button>
          <Button block bsSize="normal"  className="button" ten="button3" onClick={this._xoaBenhNhan} >
            Xóa
          </Button>
        </form>
        <div className="rainbow">
          {
            familytree.map(u => 
              (
                <div key={u.name}>
                   {u.name} 
                </div>
              )
          )
          }
        </div>
        <Tree
          data={result}
          nodeRadius={15}
          margins={{ top: 20, bottom: 10, left: 20, right: 200 }}
            height={700}
            width={1000}/>
      </div>
    )
 }
}

const mapStateToProps = (storeState:IRootState) => ({
  // account: storeState.authentication.account,
  // isAuthenticated: storeState.authentication.isAuthenticated
  person: storeState.people.listPerson,
  familytree: storeState.people.listFamilyTree
});

что мне делать? Извините за мой плохой Энгли sh

Answer 1

Поскольку у вас есть массив в первом фрагменте кода, вы можете проверить, содержит ли он сначала какие-либо элементы, а затем получить доступ к первому элементу, как показано ниже:

const data = [{ name: 'Alex Statham', people: [] /* all your data */ }];
const result = data && data[0];
console.log(result);

Таким образом, вы получите правильную структуру для Граф дерева реакций .

Надеюсь, это поможет!