Reactjs 如何在react js中单击图像（图标）而不刷新页面时更新数组状态

我正在使用expampleURL获取一些项目数组（'https://www.getadata.com/items，并使用身份验证获取更多的愿望，例如url（'https://www.getadata.com/wishes“），我将两个数组数据与匹配的UID混合，在ui中显示…如果真值显示单选选中图标或假值显示单选未选中图标，现在我想通过单选按钮上的onclick发布愿望的真值或假值..我正在维护类似值，在onclick图标之后

我可以成功发布…但我无法在UI中看到…刷新页面后，我可以在UI中看到更新的阵列…如何在不刷新页面的情况下更新阵列并在UI中看到更新的阵列

请帮我做这个

代码沙盒链接：

import React，{Component}来自“React”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/icons/RadioButtonched”导入RadioButtonchedicon；
从“@material ui/icons/RadioButtonUnchecked”导入RadioButtonUnchecked；
从“axios”导入axios；
类扩展组件{
构造函数（）{
超级（）；
此.state={
项目：[
{uid:“1001”，项目：“iPhone”}，
{uid:“1002”，项目：“iPad”}，
{uid:“1003”，项目：“iTab”}，
{uid:“1004”，项目：“iTelevision”}
],
愿望：[
{uid:“1001”，愿望：真的}，
{uid:“1002”，wish:null}，
{uid:“1003”，愿望：真的}，
{uid:“1004”，愿望：null}
],
UserToken:sessionStorage.getItem（'UserToken'），
};
}
componentDidMount（）{
axios
.get（“https://www.getadata.com/items")
.然后（（响应）=>{
这是我的国家({
项目：resposne.data.items
});
})
.catch（（错误）=>{
console.log（错误）；
});
if（this.state.UserToken）{
axios
.get（“https://www.getadata.com/wishes")
.然后（（响应）=>{
这是我的国家({
愿望：resposne.data.wishes
});
})
.catch（（错误）=>{
console.log（错误）；
});
}
}
单击预定=（项目）=>{
if（this.state.UserToken）{
取回（“https://www.getadata.com/wishes", {
方法：“张贴”，
标题：{
“内容类型”：“应用程序/json”，
授权：`Token${this.state.UserToken}`
},
正文：JSON.stringify({
课程：[
{
uid:item.uid，
愿望：！item.wish
}
]
})
}).catch（（错误）=>{
console.log（错误）；
});
}
};
render（）{
const itemsObj=this.state.items.reduce（（itemsObj，item）=>{
返回{
…Sobj，
[item.uid]：item
};
}, {});
const mergedObj=this.state.wish.reduce（（mergedObj，{uid，wish}）=>{
返回{
…合并Dobj，
[uid]：{
…合并dobj[uid]，
希望
}
};
}，j）；
返回(
液体
项目
希望
{Object.values（mergedObj）.map（（项）=>(
{item.uid}
{item.item}
单击此项。单击命令（项目）}
align=“left”
>
{item.wish==true(
) : (
)}
))}
);
}
}
出口违约意愿；

No

。然后从
fetch
处理响应和更新状态？在组件装载时也会进行相同的调用，因此这可能是在页面重新加载时看到数据的原因。我没有令牌，因此无法获取
fetch（“https://www.getadata.com/wishes“，…）
但要工作。如果您有空，我们可以聊一下这些……请放心，让我们聊聊
import React, { Component } from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import RadioButtonCheckedIcon from "@material-ui/icons/RadioButtonChecked";
import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked";
import axios from "axios";
class Wish extends Component {
  constructor() {
    super();
    this.state = {
      items: [
        { uid: "1001", item: "iPhone" },
        { uid: "1002", item: "iPad" },
        { uid: "1003", item: "iTab" },
        { uid: "1004", item: "iTelevision" }
      ],
      wishes: [
        { uid: "1001", wish: true },
        { uid: "1002", wish: null },
        { uid: "1003", wish: true },
        { uid: "1004", wish: null }
      ],
        UserToken: sessionStorage.getItem('UserToken'),
    };
  }
  componentDidMount() {
    axios
      .get("https://www.getadata.com/items")
      .then((resposne) => {
        this.setState({
          items: resposne.data.items
        });
      })
      .catch((error) => {
        console.log(error);
      });

    if (this.state.UserToken) {
      axios
        .get("https://www.getadata.com/wishes")
        .then((resposne) => {
          this.setState({
            wishes: resposne.data.wishes
          });
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
  clickedIcon = (item) => {
    if (this.state.UserToken) {
      fetch("https://www.getadata.com/wishes", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Token ${this.state.UserToken}`
        },
        body: JSON.stringify({
          courses: [
            {
              uid: item.uid,
              wish: !item.wish
            }
          ]
        })
      }).catch((error) => {
        console.log(error);
      });
    }
  };
  render() {
    const itemsObj = this.state.items.reduce((itemsObj, item) => {
      return {
        ...itemsObj,
        [item.uid]: item
      };
    }, {});
    const mergedObj = this.state.wishes.reduce((mergedObj, { uid, wish }) => {
      return {
        ...mergedObj,
        [uid]: {
          ...mergedObj[uid],
          wish
        }
      };
    }, itemsObj);

    return (
      <div>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>UID</TableCell>
                <TableCell align="left">Item</TableCell>
                <TableCell align="left">Wish</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {Object.values(mergedObj).map((item) => (
                <TableRow key={item.name}>
                  <TableCell component="th" scope="row">
                    {item.uid}
                  </TableCell>
                  <TableCell align="left">{item.item}</TableCell>
                  <TableCell
                    onClick={() => this.clickedIcon(item)}
                    align="left"
                  >
                    {item.wish === true ? (
                      <RadioButtonCheckedIcon />
                    ) : (
                      <RadioButtonUncheckedIcon />
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
    );
  }
}
export default Wish;