javascript - 在 React 渲染中循环动态服务器响应

Question

我正在用 React 开发一些 SPA，我多次遇到过这个问题；我最终以丑陋的方式解决了这个问题，就像下面代码中发布的那样。

我觉得我错过了一些明显的东西，但我真的想不出一种更优雅(甚至正确)的方法来实现相同的结果，你能帮助我吗？

class Leaderboard extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      lb:{},
      leaderboard:""
    };
    this.leaderboardGet = this.leaderboardGet.bind(this);
    this.leaderboardSet = this.leaderboardSet.bind(this);
    this.lblooper = this.lblooper.bind(this);
    this.lbconstruct = this.lbconstruct.bind(this);
  }


  leaderboardGet(callback){ //server call which returns data
    axiosCall.get('leaderboard.php',{params:{user:this.props.user}})
    .then((response)=>{
      var arr=response.data;
      callback(arr);
    })
    .catch((error)=>{
      console.log(error);
    })
  }
  leaderboardSet(a){ //puts in lb object the results of the server call and calls lb looper
    this.setState({lb: a});
    this.lblooper();
  }
  componentWillMount(){
    this.leaderboardGet(this.leaderboardSet);
  }

  lblooper(){ //the ugliness itself: loops the data in lb object, and pushes it into an "html string" in lblconstruct function 
    Object.entries(this.state.lb).forEach(
      ([key, value]) => this.lbconstruct(`<div class="leaderblock ${value.active}"><div class="leaderscore">${value.pos}) </div><div class="leadername">${value.usrname}</div><div class="leaderscore dx">${value.pts} <i class='fa fa-trophy'></i></div></div>`)
    );
  }
  lbconstruct(s){
    this.setState({leaderboard:this.state.leaderboard+=s});
  }

  render() {
    return (
      <div>
        <div className="leaderboard">
          <div dangerouslySetInnerHTML={{__html:this.state.leaderboard}}/>
        </div>
      </div>
    );
  }
}

基本上，如果我有必须将服务器数据放入 html 格式以进行 N 个循环，我找不到其他方法，所以我想知道我错在哪里。

Answer 1

将数据输出到渲染函数中的 react 元素中:

class Leaderboard extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      leaderboard: {},
    };
  }

  componentWillMount(){
    axiosCall.get('leaderboard.php', { params: { user:this.props.user } })
      .then(response => this.setState({ leaderboard: response.data }))
      .catch(console.log)
  }

  render() {
    const { leaderboard } = this.state
    return (
      <div>
        <div className="leaderboard">
          // .map returns a new array, which we have populated with the react elements
          { Object.keys(leaderboard).map((key) => {
            const value = leaderboard[key]
            return (
              <div key={key} class={`leaderblock ${value.active}`}>
                <div class="leaderscore">{value.pos}</div>
                <div class="leadername">{value.usrname}</div>
                <div class="leaderscore dx">
                  {value.pts}
                  <i class='fa fa-trophy'></i>
                </div>
              </div>
            )
          }) }
        </div>
      </div>
    );
  }
}

这样做可以让React正常工作，它可以跟踪那里有哪些元素，如果您添加一个元素，它可以看到差异，并且只需将一个元素添加到末尾，而不是重新渲染一切。

另请注意，如果您只获取一次数据，那么使用“容器”组件可能是有意义的，它可以获取数据并将其作为 Prop 传递到“哑”组件中。