J'ai 3 composants. App.js - Principal. localLog.jsx sans état, LoadBoard.jsx avec état complet. Je veux prendre une chaîne de données de LoadBoard et l'afficher dans localLog.jsx. Le problème est que je ne peux pas comprendre pourquoi LocalLog ne s'affiche pas à l'écran.

console.log(this.data.Array) in App.jsx localLog is ["configuration"] (2) ["configuration", "It's good configuration"]

App.jsx

class App extends Component {
  constructor(props) {
    super(props);

    this.dataArray = [];
    this.state = {
      headers: []
    };
    this.localLog = this.localLog.bind(this);
  }

  localLog(data) {
    if (data) {
      this.dataArray.push(data);
      console.log(this.dataArray);
      this.dataArray.map(data => {
        return <LocalLog info={data} />;
      });
    }
  }

  render() {
    return (
      <>
        <LoadBoard apiBase={this.state.apiBase} localLog={this.localLog} />
        <pre id="log_box">{this.localLog()}</pre>
      </>
    );
  }
}

LocalLog.jsx

let localLog = props => {
  return (
    <pre className={classes.background}>
      <ul className={classes.ul}>
        <li>{props.info}</li>
        <li>hello world</li>
      </ul>
    </pre>
  );
};

export default localLog;

LoadBoard.jsx

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

  componentDidMount() {
    this.props.localLog("configuration");
    this.props.localLog(`It's good configuration`);
  }

  render() {
    return (
      <div>
        <h1>Nothing interesting</h1>
      </div>
    );
  }
}
2
Arnas Dičkus 13 mars 2019 à 14:33

2 réponses

Meilleure réponse

Vous ne retournez rien de la méthode localLog, devrait être :

return this.dataArray.map(data => {
    return <LocalLog info={data} />;
});

ÉDITER:

Voici à quoi devrait ressembler votre composant App.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      headers: [],
      logs: []
    };
    this.addLog = this.addLog.bind(this);
  }

  // Add log to state
  addLog(log) {
    this.setState(state => ({
      ...state,
      logs: [...state.logs, log]
    }));
  }

  render() {
    return (
      <>
        <LoadBoard apiBase={this.state.apiBase} localLog={this.addLog} />
        <pre id="log_box">
          {this.state.logs.map(log => {
            return <LocalLog info={log} />;
          })}
        </pre>
      </>
    );
  }
}
2
Pavel Denisjuk 13 mars 2019 à 12:07

Vous devez utiliser la méthode setState afin de re-rendre le composant. vous pouvez essayer ceci.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      headers: [],
      dataArray: []
    };
    this.localLog = this.localLog.bind(this);
  }

  localLog(data) {
    if (data) {
      this.state.dataArray.push(data);
      this.setState({dataArray: this.state.dataArray})
    }
  }

  render() {
    return (
      <>
        <LoadBoard apiBase={this.state.apiBase} localLog={this.localLog} />
        <pre id="log_box">{this.state.dataArray.map(i => <LoaclLog info={i}/>)}</pre>
      </>
    );
  }
}
2
Z.li 13 mars 2019 à 12:13