Проблема с обработкой данных от express

Question

я новичок в express и реагирую. Пытаюсь сделать свое первое приложение, но у меня проблема с обработкой моих данных из express. Express

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/favcolors', (req, res) => {
    const colors = [
        'red',
        'green',
        'yellow'
    ];
    res.json(colors);
});

app.listen(port, () => console.log(`Listening on port ${port}`));

Реагировать

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      colors: []
    }
  }
  callApi = async () => {
    const response = await fetch('/favcolors');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
};
  componentDidMount() {
  this.callApi()
  .then(colors => this.setState({colors}, () => console.log('Fetch data ', colors)));
  console.log(this.state.data)
}
wantYellow = () => {
  this.setState({});
};
  render() {
    return (
      <div>
        <h1>
          Fav colors: {this.state.colors[0]}
        </h1>
        <button type="button" onClick={this.wantYellow}>
          Change
        </button>
      </div>
    );
  }
}
export default App;

Я хочу изменить «Fav Color» с красного - this.state.colors на желтый с помощью кнопки, но я не знаю, как сделай это. Можете привести несколько примеров?

Answer 1

Один из способов сделать это - сохранить index цветов в state, например:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      colors: [],
      index: 0
    }
    this.wantYellow = this.wantYellow.bind(this);
  }
  callApi = async () => {
    const response = await fetch('/favcolors');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
};
  componentDidMount() {
  this.callApi()
  .then(colors => this.setState({colors}, () => console.log('Fetch data ', colors)));
  console.log(this.state.data)
}
wantYellow = () => {
  this.setState({ index: 2 });
};
  render() {
    return (
      <div>
        <h1>
          Fav colors: {this.state.colors[this.state.index]}
        </h1>
        <button type="button" onClick={this.wantYellow}>
          Change
        </button>
      </div>
    );
  }
}
export default App;

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