如何引起对重新渲染复选框的反应

编程问答 2022-06-14

问题描述

所以，我正在从后端获取数据列表

const [data,setData] = useState([]);
const getDataSet = async () => {
const { data } = await inapp.get('/v1/vcr/getData');
setData(data.payload);

useEffect(() => {
  getData();
},[]);

我正在使用数组映射功能渲染复选框列表 然后，我有一个按钮

const [checked,setChecked] = useState([]);
  const handletoggle = (value) => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex,1);
    }
    setChecked(newChecked);
  };
  const renderDataCheckBoxes = () => {
    return (
      <div className={classes.inlineChecks}>
        {data.map((row) => {
          return (
            <FormControlLabel
              key={row.id}
              control={
                <CheckBox
                  tabIndex={-1}
                  onClick={() => handletoggle(row.name)}
                  checked={checked.indexOf(row.name) !== -1}
                  checkedIcon={<Check className={classes.checkedIcon} />}
                  icon={<Check className={classes.uncheckedIcon} />}
                  classes={{
                    checked: classes.checked,root: classes.checkRoot,}}
                />
              }
              classes={{ label: classes.label }}
              label={row.name}
            />
          );
        })}
      </div>
    );
  };

我还有一个按钮，将从后端删除选中的项目。问题是，如何使复选框重新呈现以删除已删除的项目？

解决方法

这里有4种方法来重新渲染React中的组件，而不必是CheckBox

https://linguinecode.com/post/4-methods-to-re-render-react-component

尽管可以使用，但forceRender()并不推荐在任何地方

,

这是由于我处理删除的方式。我正在使用foreach，显然它会触发等待呼叫，而无需等待。我切换到for..of循环，它的工作原理。请参阅我的其他帖子以获取更多详细信息。

async await not behaving as expected in reactjs

reactjsreactjsreactjsreactjsrerender