更新渲染的组件Prop值ASYNC

Question

我创建了带有财务数据的几个列表项目，我想使用React-Sparklines在侧面显示一个迷你图。因此，在映射数组时，我试图获取图形数据，因为检索数据可能需要一些时间，但是看来我无法正确更新Prop值的图形组件。

一旦从获取数据重新删除数据后，如何更新Sparklines组件中的Prop数据？是否可能？

这是我的代码的示例

class CurrencyList  extends Component {
  currencyGraph(symbol) {
     return fetch(baseURL, {
        method: 'POST',
        headers: {
            'Authorization': 'JWT ' + token || undefined, // will throw an error if no login
        },
        body: JSON.stringify({'symbol': symbol})
    })
    .then(handleApiErrors)
    .then(response => response.json())
    .then(function(res){
        if (res.status === "error") {
            var error = new Error(res.message)
            error.response = res.message
            throw error
        }
        return res.graph_data
    })
    .catch((error) => {throw error})
  }
  render () {
     topCurrencies.map((currency,i) => {
       return (
         <ListItem key={i} button>
           <Sparklines data={this.currencyGraph(currency.symbol)} >
             <SparklinesLine style={{ stroke: "white", fill: "none" }} />
           </Sparklines>
           <ListItemText primary={currency.symbol} />
         </ListItem>
       )
     }) 
  }
}

Answer 1

我会用自己的组件包裹此组件，并接受数据作为道具。
在父组件中，我只有在准备好数据并将每个组件传递每个迭代的相关数据时才会渲染列表。
这是一个运行的小示例

const list = [
  {
    key: 1,
    data: [5, 10, 5, 20]
  },
  {
    key: 2,
    data: [15, 20, 5, 50]
  },
  {
    key: 3,
    data: [1, 3, 5, 8]
  }
];
class MySparklines extends React.Component {
  render() {
    const { data } = this.props;
    return (
      <Sparklines data={data} limit={5} height={20}>
        <SparklinesLine style={{ fill: "#41c3f9" }} />
      </Sparklines>
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: []
    }
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({ dataList: list });
    }, 1500);
  }
  renderCharts = () => {
    const { dataList } = this.state;
    return dataList.map((d) => {
      return(
        <MySparklines key={d.key} data={d.data} />
      );
    })
  }
  render() {
    const { dataList } = this.state;
    return (
      <div>
      {
        dataList.length > 0 ?
        this.renderCharts() :
        <div>Loading...</div>
      }
      </div>
    );
  }
}

Answer 2

您无法从异步函数返回数据。相反，当您的加载请求完成后，将数据设置为状态，该数据将触发组件呈现。请注意，在下面的测试案例中，它会呈现占位符，直到数据准备就绪为止。

Item = props => <div>{props.name}</div>;
class Test extends React.Component {
  state = {
    data: ''
  }
  componentDidMount() {
    // Simulate a remote call
    setTimeout(() => {
        this.setState({
          data: 'Hi there'
        });
    }, 1000);
  }
  render() {
    const { data } = this.state;
    return data ? <Item name={this.state.data} /> : <div>Not ready yet</div>;
  }
}
ReactDOM.render(
  <Test />,
  document.getElementById('container')
);

小提琴