[英]setState to an Array inside an object
這就是我的Chart組件中的狀態。 我從我的數據庫(帶有componentDidMount)中獲取城市數據和關注者數據,我想將城市設置為chartData內的lables數組,並將關注者(包含數字的數組)設置為數據數組,但是我無法獲取它完成。 最好的方法是什么?
state = {
chartData: {
labels: [here],
datasets: [
{
label: 'Population',
data: [here],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
]
}
]
}
}
授予您要在其中添加關注者的datasets
數組中只有一個對象,您可以像這樣更新狀態:
class App extends React.Component { state = { chartData: { labels: [], datasets: [ { label: "Population", data: [], backgroundColor: [ "rgba(255, 99, 132, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(255, 206, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 99, 132, 0.6)" ] } ] } }; componentDidMount() { setTimeout(() => { this.setState(prevState => { const cities = ["foo", "bar", "baz"]; const followers = [1, 2, 3]; return { chartData: { ...prevState.chartData, labels: cities, datasets: [ { ...prevState.chartData.datasets[0], data: followers } ] } }; }); }, 2000); } render() { return <div>{JSON.stringify(this.state)}</div>; } } ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.