Question

我正在根据对象是否有一定数量的错误创建状态图标。

将ComponentDidMount中的数据传递给我想要评估数据的函数的最佳方法是什么？我试图在对象中添加状态，但是得到TypeError: error.filter is not a function

import React from 'react';

class PolicyIcon extends React.Component {
  state = {
    errors: ''
  };

  componentDidMount() {
    let initialErrors = [];
    fetch('http://localhost:3000/status/2/errors')
      .then(response => {
        return response.json();
      })
      .then(data => {
        console.log(data);
        this.setState({ errors: data });
      });
  }

  addErrors = errors => {
    console.log(errors);
    errors.filter((x, i) => {
      return x.isError >= 5;
    }).length;
  };

  statusCircle = errors => {
    return this.addErrors(errors) ? (
      <svg height="100" width="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="black"
          stroke-width="3"
          fill="red"
        />
      </svg>
    ) : (
      <svg height="100" width="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="black"
          stroke-width="3"
          fill="green"
        />
      </svg>
    );
  };

  render() {
    <div>{this.statusCircle(this.state.errors)}</div>;
  }
}

export default UserIcon;

Answer 1

我可以通过此代码向您提供很多建议。首先，您非常努力地耦合您的代码。意思是，你给你的图标做了很多任务。它负责数据检索和定义UI。下面我给你提供了一个方法，让你做你想做的事情和一个非常整洁的结构。

const UserIcon = ({state}) => (
 <svg height="100" width="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="{state === 'error' ? 'red' : 'green'}"
  />
 </svg>
);

如您所见，UserIcon全权负责用户显示。现在，我们应该编写一个单独的基于类的组件来进行读取和数据操作。

class UserIconManager extends React.Component {
 constructor(props){
  super(props);
  this.state = { errors: 0, loaded: false }
 }

 componentDidMount() {
  fetch('http://localhost:3000/user/2/status')
  .then(response => response.json())
  .then(data => this.setState({ errors: data.errors, loaded: true})
 }

 render() {
   const { errors, loaded } = this.state;
   const iconState = errors >= 5 ? 'error': null
   return loaded ? 
    <UserIcon state={iconState} /> :
    null
 }
}

我不确定你要做什么的具体细节，但我很确定我的例子是100％相关的。祝你好运

基于api调用返回的React中的条件组件

1 个答案: