Javascript 在react.js中填充必要的数据 类TodoApp扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ } } 组件willmount（）{ 此参数为.getSampleData（）； } getSampleData（）{ console.log（“输入值”）； 这是我的国家({ 样本数据：{ 标签：['1月'，'2月'，'3月'，'4月'， “五月”、“六月”、“七月”、“八月”， “九月”、“十月”、“十一月”、“十二月”]， 数据集：[ { 标签：“2017年”， 数据：[92,50,33,70,122,22,21,20,22,215,278,190]， }, { 标签：“2018年”， 数据：[22101520278260 245221516718174154148]， }, ] }} ); ///这里我想从sampleData中获取monthdata 蒙塔塔： //例如，本月221应该来自sampleData console.log（'end value'）； } render（）{ 返回( 待办事项：

蒙塔塔

) } }

---

我是React.js新手，但我无法在标签中显示特定月份的数据。虽然我在这里引用了monthData word，但我对引用变量（sampleData）以及从html中获取数据没有足够的了解。从sampleData直接在p标记中生成particualr month值对我来说也很好，不需要使用monthData变量。有人能帮我吗。谢谢。

这里我有本月的数据。同样，如果您想要动态的，您可以将其更改为年。请检查以下更新的代码段：

class TodoApp extends React.Component {
   constructor(){
    super();
    this.state = {

    }
  }

  componentWillMount(){
    this.getSampleData();
  }

  getSampleData(){ 
   console.log('enter value');
    this.setState({
      sampleData:{
        labels: ['Jan', 'Feb', 'Mar', 'Apr',
                  'May', 'Jun', 'Jul', 'Aug',
                   'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [
            {
                label: '2017',
                data: [92, 50, 33, 70, 122, 22, 21,20, 22, 215, 278, 190],

            },
            {
              label: '2018',
              data: [22, 210, 520, 278, 260, 245, 221,516, 718, 174, 154, 148],

          },
        ]
    }} );
    /// Here i want to get monthdata that to be taken from sampleData
monthData:
   //for example this month 221 should come here,from the sampleData
    console.log('end value');


  }

  render() {
    return (
      <div>
        <h2>Todos:</h2>
       <p> monthData</p>
      </div>
    )
  }
}

类TodoApp扩展了React.Component{
构造函数（）{
超级（）；
此.state={
}
}
组件willmount（）{
此参数为.getSampleData（）；
}
getSampleData（）{
console.log（“输入值”）；
这是我的国家({
样本数据：{
标签：['1月'，'2月'，'3月'，'4月'，
“五月”、“六月”、“七月”、“八月”，
“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“2017年”，
数据：[92,50,33,70,122,22,21,20,22,215,278,190]，
},
{
标签：“2018年”，
数据：[22101520278260 245221516718174154148]，
},
]
}} );
///这里我想从sampleData中获取monthdata
蒙塔塔：
//例如，本月221应该来自sampleData
console.log（'end value'）；
}
render（）{
const d=新日期（）；
常量m=d.getMonth（）；
const monthData=this.state.sampleData.dataset[1].data[m]；
返回(
待办事项：
当月数据：{monthData}

)
}
}

---

此处数据[m]表示当月（6-7月）

首先从当年的数据集中过滤数据。您可以使用

new Date（）.getFullYear（）

获取当前年份，使用

new Date（）.getMonth（）

获取当前月份。筛选器将返回一个数组

1.

this.state.sampleData.datasets.filter（（dataset）=>dataset.label==new Date（）.getFullYear（））

此语句将在数据集中为您提供当前年份的筛选器对象

2.

filteredArray[0]。数据[new Date（）.getMonth（）]

将为您提供当前月份的数据

class TodoApp extends React.Component {
   constructor(){
    super();
    this.state = {

    }
  }

  componentWillMount(){
    this.getSampleData();
  }

  getSampleData(){
   console.log('enter value');
    this.setState({
      sampleData:{
        labels: ['Jan', 'Feb', 'Mar', 'Apr',
              'May', 'Jun', 'Jul', 'Aug',
               'Sep', 'Oct', 'Nov', 'Dec'],
        datasets: [
        {
            label: '2017',
            data: [92, 50, 33, 70, 122, 22, 21,20, 22, 215, 278, 190],

        },
        {
          label: '2018',
          data: [22, 210, 520, 278, 260, 245, 221,516, 718, 174, 154, 148],

        },
      ]
    }} );
    /// Here i want to get monthdata that to be taken from sampleData
    monthData:
   //for example this month 221 should come here,from the sampleData
   console.log('end value');


  }

  render() {
    const d = new Date();
    const m = d.getMonth();
    const monthData = this.state.sampleData.datasets[1].data[m];
    return (
      <div>
        <h2>Todos:</h2>
        <p>Current Month data : {monthData}</p>
      </div>
    )
  }
}

render（）{
返回(

//七月：在这种情况下是221
{this.state.sampleData.labels[new Date（）.getMonth（）]}
{this.state.sampleData.datasets.filter（（dataset）=>dataset.label==new Date（）.getFullYear（））[0]。数据[new Date（）.getMonth（）]

)
}

JS Fiddle链接：

var数据={标签：['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']，数据集：[{标签：'2017'，数据：[92,50,33,70122,22,21,20,2221578190]，}，{标签：'2018'，数据：[2210520278602452215174154148]，}]
类TodoApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
样本数据：“，
currentMonth:新日期（）.getMonth（），
当前年份：新日期（）.getFullYear（），
蒙塔塔：“，
}
}
组件willmount（）{
此参数为.getSampleData（）；
} 
getSampleData（）{
var self=这个；
this.setState（{sampleData:data}，（）=>{
var filteredArray=this.state.sampleData.datasets.filter（（数据集）=>dataset.label==this.state.currentYear）
var monthData=filteredArray[0]。数据[this.state.currentMonth]
this.setState（{monthData:monthData}）
})
}
render（）{
返回(

{this.state.sampleData.labels[this.state.currentmount]}:{this.state.monthData}

)
}
}

组件状态通过实例的

状态

成员提供，该成员只是一个普通对象（包含通过

设置状态

放入状态的任何内容）。例如，在您的

render

方法中，您可以通过

this.state.datasets

获取数据集。要将任何变量插入JSX（在

render

方法中的html语法），只需使用大括号（例如

{myVariable}

）。@user533如何呈现它？当前年度和月份的数据？或者是每年当月的所有数据？@SubhanshuPandey当年当月的数据…我们不能使用一个变量，比如sampleData，只显示在p标签中，并将逻辑移动到getSampleData，这只是一个想法，看看所有的逻辑和变量是如何在getSampleData方法中使用的。你能这样做吗…这将帮助我理解如何进行不同的操作circumstances@user533当然可以。请看这把最新的小提琴这对你有帮助吗？我现在在调用sampleData的setState时使用了相同的逻辑。谢谢…非常有用谢谢@Arul您的输入对我帮助很大…：）@user533欢迎：-）

    render() {
    return (
      <div>
       <p>
        // Jul : 221 in this case
        {this.state.sampleData.labels[new Date().getMonth()]} : 
        {this.state.sampleData.datasets.filter((dataset) => dataset.label == new Date().getFullYear())[0].data[new Date().getMonth()]}  
       </p>
      </div>
    )
  }

var data  = { labels:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],datasets:[{label:'2017',data:[92,50,33,70,122,22,21,20,22,215,278,190],},{label:'2018',data:[22,210,520,278,260,245,221,516,718,174,154,148],}]}

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        sampleData: "",
      currentMonth : new Date().getMonth() ,
      currentYear : new Date().getFullYear(),
      monthData : "",
    }
  }


  componentWillMount(){
    this.getSampleData();
  } 

  getSampleData(){
  var self = this;
  this.setState({  sampleData :  data},()=>{
    var filteredArray = this.state.sampleData.datasets.filter((dataset) => dataset.label == this.state.currentYear)
    var monthData = filteredArray[0].data[this.state.currentMonth]
        this.setState({ monthData : monthData })
    })
}

  render() {
    return (
      <div>
       <p>
              {this.state.sampleData.labels[this.state.currentMonth]} :  {this.state.monthData}
       </p>
      </div>
    )
  }
}