Question

componentDidMount(){
    setInterval(()=>{auth().get('/coordinates').then((res,err)=>{
        if(err) throw err;
        console.log(res);
        let labels = [];
        let parts = [];
        for(let item of res.data){
            labels.push(item.time);
            parts.push(item.numberOfParts);
        }
        let obj = this.getChartData(labels,parts);
        this.setState({chartData: obj});
    }).catch(err=>{
        console.log(err);
    });
},10000)

我将在10秒间隔后更新状态，但是子组件不会使用新更新的数据进行更新。

我尝试使用forceUpdate（），但这也不起作用。在控制台从API获取新响应后记录状态时，它会显示更新的内容，但不会重新呈现或更新子组件。

我计划在从API获取新数据时更新图表（子组件）。

这是完整的代码！

import React from 'react';
import LineChart from './Chart';
import auth from '../api/auth';

class Body extends React.Component {
constructor(){
    super();
    this.state = {
        email:"",
        password:"",
        chartData:{}
    }
}
getChartData(label, part){
    return {
        labels: label,
        datasets:[
          {
            label:'Unix Timeline',
            data:part,
            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(){
    setInterval(()=>{auth().get('/coordinates').then((res,err)=>{
        if(err) throw err;
        console.log(res);
        let labels = [];
        let parts = [];
        for(let item of res.data){
            labels.push(item.time);
            parts.push(item.numberOfParts);
        }
        let obj = this.getChartData(labels,parts);
        this.setState({chartData:obj});
    }).catch(err=>{
        console.log(err);
    });},10000);  
}
onFormSubmission = (e)=>{
    e.preventDefault();
    let creedentials ={
        "email":`${this.state.email}`,
        "password":`${this.state.password}`
    }
    auth().post('/user/signin',creedentials)
    .then((resp, err)=>{
        if(err) throw err;
        this.props.signIn(resp.data.status);
    }).catch(err=>{
        console.log(err);
    })

}
render(){
    if(!this.props.signedIn)
    return (
        <div style={{ marginTop:"10vh", display:"flex",justifyContent:"center", flexDirection:"row"}}>
            <div className="form-group shadow-lg p-3 mb-5 bg-white rounded" style={{width:"400px", display:"flex", flexDirection:"column",padding:"20px"}}>
                <legend>Login</legend>
                <label for="exampleInputEmail1">Email address</label>
                 <input value={this.state.email} onChange={e=>{this.setState({email:e.target.value})}} type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required/>
                 <label for="exampleInputPassword1">Password</label>
                 <input value={this.state.password} onChange={e=>{this.setState({password:e.target.value})}} type="password" className="form-control" id="exampleInputPassword1" placeholder="Password" required></input>
                 <button onClick={this.onFormSubmission} type="submit" className="btn btn-primary" style={{marginTop:"10px", alignSelf:"center"}}>Submit</button>
             </div>
         </div>
     );
    return (
        <div className="container" style={{height:"50vh"}}>
           <LineChart  chartData={this.state.chartData} legendPosition="bottom"/>
        </div>
    );
}
}

export default Body;

Answer 1

我认为您的问题在scripts/01-01-19.ts(1,21): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. scripts/01-01-19.ts(1,29): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. scripts/01-01-19.ts(1,61): error TS7006: Parameter 'mod' implicitly has an 'any' type. scripts/01-01-19.ts(4,81): error TS7017: Element implicitly has an 'any' type because type '{}' has no index signature. scripts/01-01-19.ts(5,5): error TS7017: Element implicitly has an 'any' type because type '{}' has no index signature. scripts/01-01-19.ts(8,24): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. scripts/01-01-19.ts(8,32): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation. scripts/01-01-19.ts(8,67): error TS7006: Parameter 'mod' implicitly has an 'any' type. scripts/01-01-19.ts(16,21): error TS2304: Cannot find name 'define'. scripts/01-01-19.ts(16,46): error TS2304: Cannot find name 'define'. scripts/01-01-19.ts(17,9): error TS2304: Cannot find name 'define'. scripts/01-01-19.ts(19,14): error TS7006: Parameter 'require' implicitly has an 'any' type. scripts/01-01-19.ts(19,23): error TS7006: Parameter 'exports' implicitly has an 'any' type. scripts/01-01-19.ts(32,36): error TS7006: Parameter 'line' implicitly has an 'any' type.

将const obj = this.getChartData(labels,parts);替换为const

更新状态后，组件不会重新渲染

1 个答案: