无法根据第一个数组的值显示第二个数组的数据

Question

我是个新手，下面是一个组件的状态和渲染方法，该组件必须基于“ item.full_name”显示this.state.numberOfStarList的数据， 但我遇到错误-无法读取未定义的属性“状态”

this.state = {
  error: null,
  isLoaded: false,
  numberOfStarList: [],
  objectDetails: []
};

render() {
    return (
      <div className="container">
        {this.state.objectDetails.map(function(item) {
          return (
            <div className="col-md-6" key={item.full_name}>
              <div className="card">
                <img
                  className="card-img-top"
                  src={item.loggedInAvatar_url}
                  alt="user"
                />
                <div className="card-body">
                  <a
                    className="card-title"
                    href={item.html_url}
                    target="_blank"
                  >
                    <span>{item.full_name}</span>
                  </a>
                  <br />
                  <a
                    className="card-text"
                    href={item.loggedInHtmlUrl}
                    target="_blank"
                  >
                    <span>{item.loggedInOwner}</span>
                  </a>
                </div>
              </div>
 {this.state.numberOfStarList.map(function(star){
                    return (
                        <h1>{star.key}</h1>
                    )
                })}
            </div>

          )
        })}

      </div>
    );

Answer 1

因为您应该在构造函数中定义状态，并将其绑定到函数中，如下所示：

constructor(props){
   super(props);
   this.state = {
     error: null,
     isLoaded: false,
     numberOfStarList: [],
     objectDetails: []
   };
}

render() {
    return (
      <div className="container">
        {this.state.objectDetails.map((item) => {
          return (
            <div className="col-md-6" key={item.full_name}>
              <div className="card">
                <img
                  className="card-img-top"
                  src={item.loggedInAvatar_url}
                  alt="user"
                />
                <div className="card-body">
                  <a
                    className="card-title"
                    href={item.html_url}
                    target="_blank"
                  >
                    <span>{item.full_name}</span>
                  </a>
                  <br />
                  <a
                    className="card-text"
                    href={item.loggedInHtmlUrl}
                    target="_blank"
                  >
                    <span>{item.loggedInOwner}</span>
                  </a>
                </div>
              </div>
 {this.state.numberOfStarList.map((star) => {
                    return (
                        <h1>{star.key}</h1>
                    )
                })}
            </div>

          )
        })}

      </div>
    );

Answer 2

我相信您的困惑可能是由于可以通过两种方式声明状态。

1。在构造函数中

然后，您需要使用this。

class Foo extends Component {
    constructor(props) {
        //  this is important as it makes other methods access props like `this.props...`
        super(props);    

        this.state = {
            error: null,
            isLoaded: false,
            numberOfStarList: [],
            objectDetails: []
        }
    } 

    render () {...}
}

2。将状态声明为类实例变量

如果您将state声明为类实例变量（在构造函数之外），
那么您就不需要this。

class Foo extends Component {
    state = {
        error: null,
        isLoaded: false,
        numberOfStarList: [],
        objectDetails: []
    }

    render () {...}
}

要点是，如果要在构造函数外部声明state，则不需要this。

---

如果使用的是webpack，则需要Babel插件babel-plugin-transform-class-properties，以启用类实例变量的转换。