React - 在点击时遇到问题（React）

Question

((React 新手))

我试图让不同的工作（上面列出的salary.job.id）在点击时通过。这些工作已经通过 axios 调用获得。 有没有更简单的方法来实现这一点？另外，调用 this.makesalary 两次是否正确（一次在 componentDidMount 中，另一次通过点击？

这就是我想要通过的东西

 makesalary(slug = "charlotte") {
        axios.get(`https://api.teleport.org/api/urban_areas/slug:${slug}/salaries/`)
            .then(results => {
                console.log(results)
                const filteredata = results.data.salaries.filter(salary=>{
                    if(salary.job.id === "UX-DESIGNER"){
                        return true

                    }
                    if (salary.job.id === "WEB-DEVELOPER"){
                        return true
                    }
                    if(salary.job.id === "MOBILE-DEVELOPER"){
                        return true
                    }

                    return false
                })
                this.setState({salaries:
                    filteredata
                })
                }
            )

    }

这可以调用两次吗？位置是否正确？

componentDidMount (){
        this.makesalary(this.props.slug)
    }

    _onclick(salary){
       this.makesalary(salary.job.id)


    }

这是渲染

<div>
        
        <h2>What Tech Job are you in currently?</h2>
        <CardGroup>
          <Card>
            <Card.Img variant="top" src= {Mobileicon} />
            <Card.Body>
              <Card.Title>Mobile Developer</Card.Title>
              <Card.Text>
                Mobile Developer specialise in mobile technology such as building apps for Google's Android, Apple's iOS and Microsoft's Windows Phone platforms. 
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" onClick={this._onclick}>Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
          <Card>
            <Card.Img variant="top" src= {UXicon} />
            <Card.Body>
              <Card.Title>UX Designer</Card.Title>
              <Card.Text>
              In a nutshell, the UX designer is responsible for how a product or website feels.
              The UX designer's job is to zero in on users' underlying emotional and functional needs.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" >Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
          <Card>
            <Card.Img variant="top" src={Webdevelop} />
            <Card.Body>
              <Card.Title>Web Developer</Card.Title>
              <Card.Text>
              A Web Developer is responsible for the coding, design and layout of a website according to a company's specifications.
              As the role takes into consideration user experience and function, a certain level of both graphic design and computer programming is necessary.
              </Card.Text>
            </Card.Body>
            <Card.Footer>
            <Button variant="danger" > 
        Pick this Job!</Button>{' '}
            </Card.Footer>
          </Card>
        </CardGroup> 
        </div>
        
        )
        
    }

 

Answer 1

我想帮忙，所以我将指出一些事情并提出一些建议。在开始之前，如果我说的不正确，我必须道歉，如果有人能纠正我，我将不胜感激。

我还将假设您的 makesalary 函数已在上面定义（显示 Axios 调用的位置）。

在您的componentdidmount 方法中，您使用从props 获得的参数调用makesalary。如果你的 props 是有效的，那绝对没问题。

您也碰巧在_onclick 方法中调用了makesalary。我建议您将其重命名为 handleClick 或 onClickHandler 以使其更清晰，并删除前面的 _，因为它是不必要的（除非它是您使用的约定）。该方法本身看起来不错。

当您使用按钮调用_onclick 时，请记住它会将event 传递给方法。您应该通过在按钮处将诸如() => _onclick(salary) 之类的函数传递给onClick 来处理此问题（因为您不打算将event 用于任何事情）。除了正确处理事件之外，这还可以帮助您为_onclick 传递正确的参数。在您提供的代码 sn-p 中，onClick 似乎没有将任何参数传递给_onclick 函数。

我建议您阅读有关这方面的官方 React 文档： https://reactjs.org/docs/handling-events.html.

希望我有所帮助！

编辑：如果您想知道，两次调用相同的方法绝对没问题！