Question

我当前正在实现isFetching标志，并且一切正常。为了更好地构建代码，我正在使用三元运算符：{isFetching? isLoading : isLoaded}

我在isLoaded部分中使用this.，但这会导致错误消息：

Parsing error: Unexpected keyword 'this'

为什么不能在返回函数之外使用this？

export class Story extends Component {

    static propTypes = {
      story: PropTypes.array.isRequired,
      getStory: PropTypes.func.isRequired,
      deleteStory: PropTypes.func.isRequired
   };

     componentDidMount() {
    this.props.getStory();
  }
  



  render() {
    const stories = this.props.story;
    const isFetching = this.props.isFetching;

    const isLoaded = (
                         { this.props.story.map((story, index) =>
                            <MDBRow id={index} key={story.id} style={{ margin: "10px",display: "inline-block" }}>
                                <MDBCol >
                                    <MDBCard style={{ width: "22rem"}}>
                                        <MDBCardImage className="img-fluid" src={pic} waves />
                                        <MDBCardBody>
                                            <MDBCardTitle>Title: {story.title}</MDBCardTitle>
                                            <MDBCardTitle>Place: {story.place}</MDBCardTitle>
                                            <MDBCardTitle>Author: {story.author.username}</MDBCardTitle>
                                            <MDBCardText>
                                                {story.content}
                                            </MDBCardText>
                                            <audio
                                                controls
                                                src={story.audio.url}>
                                                Your browser does not support the
                                                <code>audio</code> element.
                                            </audio>
                                            {story.story_owner_permission === true ? <MDBBtn href="#">Click me</MDBBtn> : null }
                                            <Link
                                                to={"/story/" + story.id}
                                                className="badge badge-warning"
                                                style={{marginLeft: '100px'}}
                                            >
                                                Details
                                            </Link>

                                        </MDBCardBody>
                                    </MDBCard>
                                </MDBCol>
                            </MDBRow>
                    )
                    }
      )

    const isLoading  = (

       <h3>Loading...</h3>
      )

    return (

  <Fragment>

        <h2>Stories</h2>

        {isFetching? isLoading : isLoaded}

      </Fragment>

    );
  }
}



function mapStateToProps(state, ownProps) {
  const { story } = state.story
  const isFetching = state.isFetching
  return { story, isFetching}
}


export default connect(
  mapStateToProps,
  { getStory, deleteStory}
)(Story);

也许这是一个愚蠢的问题，无论如何我还是很乐意澄清吗？

Answer 1

您可以在回程外使用this。您不能在Class之外使用它。问题出在您的语法中。而不是使用这种无效的语法

const isLoaded = ({ this.props.story.map((story, index) => ...

尝试执行以下操作：

const load = () =>
      this.props.story.map((story, index) => (
        <MDBRow id={index} key={story.id} style={{ margin: '10px', display: 'inline-block' }}>
          <MDBCol>
            <MDBCard style={{ width: '22rem' }}>
              <MDBCardImage className="img-fluid" src={pic} waves />
              <MDBCardBody>
                <MDBCardTitle>Title: {story.title}</MDBCardTitle>
                <MDBCardTitle>Place: {story.place}</MDBCardTitle>
                <MDBCardTitle>Author: {story.author.username}</MDBCardTitle>
                <MDBCardText>{story.content}</MDBCardText>
                <audio controls src={story.audio.url}>
                  Your browser does not support the
                  <code>audio</code> element.
                </audio>
                {story.story_owner_permission === true ? <MDBBtn href="#">Click me</MDBBtn> : null}
                <Link
                  to={`/story/${story.id}`}
                  className="badge badge-warning"
                  style={{ marginLeft: '100px' }}
                >
                  Details
                </Link>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      ))

然后

{isFetching ? isLoading : <div>{load()}</div>}

如何使用。在返回函数之外做出反应？

1 个答案: