Reactjs 如何更新表中特定行的状态

我在表格设置中有图标，因此当单击图标时，会呈现不同的图标。现在这可以正常工作了，但是我想为我单击的行中的特定行重新渲染一个不同的图标，而不是在每行中重新渲染一个不同的图标。不知道我会怎么做。这是我的密码：

import React from '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() {
        return (
        <div>
            <table border="1">
                <thead>
                    <tr>
                    <td>Rank</td>
                    <td>Name</td>
                    <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                {this.state.data.map((n) => {
                    return (
                        <tr>
                        <td> <span onClick={() => this.handleClick()}> {this.state.starIcon ? <StarBorder/> : <Star /> } </span> </td>
                        <td>{n.name}</td>
                        <td>{n.current_price}</td>
                        </tr>
                    );
                    })}
                </tbody>
            </table>
        </div>
        );
    }
}

export default Test;

从“React”导入React；
从“@material ui/icons/StarBorder”导入StarBorder；
从“@material ui/icons/Star”导入星号；
从“axios”导入axios；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
是的，
数据：[]，
}
}
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')
。然后（res=>{
常数数据=分辨率数据；
this.setState（{data:data}）
})
}
handleClick=（）=>{
this.setState（prevState=>({
starIcon:！prevState.starIcon
}));
}
render（）{
返回(
等级
名称
价格
{this.state.data.map（（n）=>{
返回(
this.handleClick（）}>{this.state.starIcon？：}
{n.name}
{n.当前价格}
);
})}
);
}
}
导出默认测试；

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

import React from '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() {
        return (
        <div>
            <table border="1">
                <thead>
                    <tr>
                    <td>Rank</td>
                    <td>Name</td>
                    <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                {this.state.data.map((n, i) => {
                    return (
                        <tr>
                        <td> <span onClick={() => this.handleClick(i)}> {n.starIcon ? <StarBorder/> : <Star /> } </span> </td>
                        <td>{n.name}</td>
                        <td>{n.current_price}</td>
                        </tr>
                    );
                    })}
                </tbody>
            </table>
        </div>
        );
    }
}

export default Test;

从“React”导入React；
从“@material ui/icons/StarBorder”导入StarBorder；
从“@material ui/icons/Star”导入星号；
从“axios”导入axios；
类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
}
}
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')
。然后（res=>{
常数数据=分辨率数据；
this.setState（{data:data.map（x=>（{…x，starIcon:true}）））
})
}
handleClick=（i）=>{
this.setState（prevState=>({
数据：prevState.data.map（（x，key）=>（key==i？{…x，starIcon:！x.starIcon}:x））
}));
}
render（）{
返回(
等级
名称
价格
{this.state.data.map（（n，i）=>{
返回(
this.handleClick（i）}>{n.starIcon？：}
{n.name}
{n.当前价格}
);
})}
);
}
}
导出默认测试；

---

希望它有帮助

您必须维护需要为单击的行渲染星星的行的索引映射。然后寻找状态有索引改变，需要使星IConWorks伟大感谢。。。只是想让你知道你在两个地方缺了一个括号。。。关于componentDidMount中的setState方法和handleClick方法。