À partir du bouton ResultsTable, je reçois la valeur désirée pour la fonction handleClick, mais setState ne définit pas gameId et reste "", où est-ce que je me trompe? Si je console le journal gameId c'est ce que je veux avoir. Merci pour toute aide.Réaction La fonction setState ne change pas la valeur
class ResultsTableContainer extends Component {
constructor(props) {
super(props);
this.state = {
tableConfig,
games: [],
gameId: ""
};
}
handleClick = event => {
event.preventDefault();
const gameId = event.target.id;
this.setState({ gameId });
console.log(this.state);
};
currentContent =() => {
if (this.state.gameId !== "") {
return <GameDetailsContainer gameId={this.state.gameId} />;
}
return (
<ResultsTable
tableConfig={this.state.tableConfig}
games={this.state.games}
onButtonClick={this.handleClick}
/>
);
};
render() {
return <div>{this.currentContent()}</div>;
}
}
export default ResultsTableContainer;
ResultsTable.jsx
const ResultsTable = ({ games, tableConfig, onButtonClick }) => (
<Table>
...
<TableBody>
{games.map((game, index) => (
...
<button>
<Link
to={`/games/${game.id}`}
onClick={onButtonClick}
id={game.id}
>
Results
</Link>
</button>
</TableBody>
</Table>
);
export default ResultsTable;
Vous devez lier votre fonction 'handleClick'. C'est l'erreur de réaction la plus commune. – jmargolisvt
@jmargolisvt: Le PO semble le faire. Ils utilisent la proposition * fields * field avec une fonction flèche. –
L'état n'est pas mis à jour immédiatement, donc 'this.setState ({gameId}); console.log (this.state); 'consignera l'ancien état. Faites 'this.setState ({gameId},() => console.log (this.state));' à la place. –