Question

我有一个getData（）函数。

getData = async () => {
    if (this.state.finalLoading === false) {
        this.setState({ loading: true })
    }
    const miners = await getMiners()
    const results = miners.map(async miner => {
        return { ...miner, logs: await getLogs(miner.minerid) }
    }
    )
    Promise.all(results).then((results) =>
        this.setState({
            miners: results,
            loading: false,
            finalLoading: true
        })
    )
}

相应的getMiners（）和getLogs（）函数如下所示。

    /**
 * getMiners - retrieve list of miners 
 */
export async function getMiners (){
    return axios.get(ROOT+'/miners')
        .then(res => {
            return res.data
        })
        .catch(err => {
            console.error(err)
            return {}
        })
}
/**
 * getLogs - retrieve list of logs
 * @argument {string} miner id of the requested miner 
 */
export async function getLogs (miner){
    return axios.get(ROOT + '/logs/' + miner)
        .then(res => {
            return res.data
        })
        .catch(err => {
            console.error(err)
            return {}
        })
}

因此，如您所见，我想每2分钟获取一次Data。我可以看到通过chrome dev工具发出的HTTP请求，但是，当将“矿工”传递到组件中（或检查console.log）时，数据完全相同。在不使用间隔的情况下，我可以刷新页面，并且会显示新数据，但是在使用此间隔时不会更新。

请帮助。

更新：

render() {
    const miners = this.state.miners
    return (
        <div className="App">
            <Navbar miners={this.state.miners} />
            <LoadingWrapper loading={this.state.loading}>
                <Switch>
                    <Route path="/:minerId"
                        render={(props) => <DashboardContainer miners={miners} {...props} />}
                    />
                    <Route path="/" exact render={props => <p>Select a miner from above.</p>} />
                </Switch>
            </LoadingWrapper>
        </div>
    )
}

被传递给DashboardContainer。

export class DashboardContainer extends Component {
    state = { miner: '' }
    componentDidMount() {
        const minerId = this.props.match.params.minerId
        const miner = this.props.miners.find(miner => {
            return minerId === miner._id
        })
        this.setState({
            miner
        })
    }
    render() {
        if (this.state.miner) {
            return <Dashboard miner={this.state.miner} />
        }
        return ('')
    }
}

此信息中心不会更新。看起来像这样。

export class Dashboard extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            GPU: 0,
            timeinterval: 86400
        }
    }

    handleClick = (num) => {
        this.setState({
            GPU: num
        })
    }

    handleTime = (num) => {
        this.setState({
            timeinterval: num
        })
    }

    render() {
        const { minerid, ownerid, logs } = this.props.miner

Answer 1

您的代码在模拟/演示环境中运行良好：

const delay = () => new Promise(resolve => setTimeout(resolve, 1000));

getData = async () => {
    const miners = await getMiners()
    const results = miners.map(async miner => {
        return { ...miner, logs: await getLogs(miner.minerid) }
    });
    
    //console.log(results);
    
    Promise.all(results).then((results) =>
      console.log(results)
    )
}
    /**
 * getMiners - retrieve list of miners 
 */
async function getMiners (){
  console.log('Fetching miners');
  await delay();
  
  return [
    {minerid: 1},
    {minerid: 2}
  ];
}
/**
 * getLogs - retrieve list of logs
 * @argument {string} miner id of the requested miner 
 */
async function getLogs (miner) {
  console.log(`Fetching logs for ${miner}`);
  await delay();
  return [
    `log1 ${miner}`,
    `log2 ${miner}`
  ];
}

getData();

您需要弄清问题所在。您说它将“不更新”。唯一超出此模拟范围的是最终的this.setState()。确保this在正确的上下文中，并且setState实际上正在被调用。将其包装在console.log中，并确保已正确设置。

没有收到更新的数据

1 个答案: