Trung tâm cá nhân
sách gpt4 ai đã đi

reactjs - 如何更新表中特定行的状态 ReactJS

In lại 作者：行者123 更新时间：2023-12-03 13:42:38 32 4
mua khóa gpt4 Nike

我在表格设置中有图标，这样当单击图标时，会呈现不同的图标。现在这工作正常，但我想为我单击的行中的特定行重新呈现不同的图标，而不是在每一行中重新呈现不同的图标。不知道我将如何去做这件事。这是我的代码:

import React từ 'react';
import StarBorder from '@material-ui/icons/StarBorder';
import Star from '@material-ui/icons/Star';
import axios from 'axios';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            starIcon: true,
            data: [],
        }
    }

    componentDidMount() {

        axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=true')
            .then(res => {
                const data = res.data;
                this.setState({ data: data})
            })
    }

    handleClick = () => {
        this.setState(prevState => ({
          starIcon: !prevState.starIcon
        }));
      }

    render() {
        trở lại (
        

            








                {this.state.data.map((n) => {
                    trở lại (





                    );
                    })}


                                    
                    Rank                    Name                    Price                    
                                                        
                          this.handleClick()}> {this.state.starIcon ?  :  }                          {n.name}                        {n.current_price}                        
                                    

        );
    }
}

export default Test;

1 Câu trả lời

在我看来，您需要将 starIcon bool 值复制到与数据数组长度相同的数组中，或者将 bool 值集成到数据数组中。这是第二个选项的建议:

import React từ 'react';
import StarBorder from '@material-ui/icons/StarBorder';
import Star from '@material-ui/icons/Star';
import axios from 'axios';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }

    componentDidMount() {

        axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=true')
            .then(res => {
                const data = res.data;
                this.setState({ data: data.map(x => ({...x, starIcon: true}) ) })
            })
    }

    handleClick = (i) => {
        this.setState(prevState => ({
          data: prevState.data.map((x, key) => (key === i ? {...x, starIcon: !x. starIcon} : x) )
        }));
      }

    render() {
        trở lại (
        

            








                {this.state.data.map((n, i) => {
                    trở lại (





                    );
                    })}


                                    
                    Rank                    Name                    Price                    
                                                        
                          this.handleClick(i)}> {n.starIcon ?  :  }                          {n.name}                        {n.current_price}                        
                                    

        );
    }
}

export default Test;

希望对你有帮助

关于reactjs - 如何更新表中特定行的状态 ReactJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57463522/

32 4 0
Bài viết được đề xuất: reactjs - 如何修复无法解析模块react redux hooks\useDispatch？
Bài viết được đề xuất: reactjs - 尝试使用 React 制作待办事项列表
Bài viết được đề xuất: css - 如何在react类组件中使用react-jss？
Bài viết được đề xuất: reactjs - 如何在自定义类组件的样式中使用主题
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com