时间戳

首页 > 解决方案 > 无法更新嵌套状态反应

reactjs - 无法更新嵌套状态反应

问题描述

我有一个可重用的下拉菜单组件，我用两个不同的列表渲染它两次，它应该用第一个元素的 id 更新状态。

布局的第一个下拉菜单更新状态没有任何问题，但第二个没有（我切换了顺序，似乎第一个更新了第二个没有的状态）。

请看代码

仪表板

       const initializeData = {
      actionStatuses: [],
      actionCategories: [],
      actionGroups: [],
      actionEvents: [],
      actionEventsWithFilter: [],
      selectedFilters: {actionStatusId: "", actionCategoryId:""},
    };
    
    const Dashboard = ({ selectedPracticeAndFy }) => {
      const [data, setData] = useState(initializeData);
    
      const getSelectedStatus = ({ key }) => {
        const actionStatusId = key;
        const selectedFilters = { ...data.selectedFilters, actionStatusId };
        
        setData((prevState) => {
          return { ...prevState, selectedFilters }
        });
      };
      const getSelectedCategory = ({ key }) => {
        const actionCategoryId = key;
        const selectedFilters = { ...data.selectedFilters, actionCategoryId };
    
        setData((prevState) => {
          return { ...prevState, selectedFilters }
        });
      };
}

结果过滤器：

const ResultFilter = ({actionStatuses, actionCategories, getSelectedStatus, getSelectedCategory}) => {


return (
    <Grid 
    justify="flex-start"
    container 
    >
        <Grid item >                
            <Typography component="div" style={{padding:"3px 9px 0px 0px"}}>
                <Box fontWeight="fontWeightBold" m={1}>
                    Result Filter:
                </Box>
            </Typography>
        </Grid>
        <Grid  >
            <DropdownList payload={actionCategories} onChange={getSelectedCategory} widthSize= {dropdownStyle.medium}/>
            <DropdownList payload={actionStatuses} onChange={getSelectedStatus} widthSize= {dropdownStyle.medium}/>
        </Grid>
    </Grid>

 );

}

下拉列表：

const DropdownList = ({ label, payload, onChange, widthSize, heightSize, withBorders, initialData }) => {
  const { selectedData, setSelectedData, handelInputChange } = useForm(
    payload
  );

  useEffect(() => {
    if (Object.entries(selectedData).length === 0 && payload.length !== 0) {
      setSelectedData(payload[0]);
    } 
  }, [payload]);

  useEffect(() => {
    if (Object.entries(selectedData).length !== 0) {
      onChange(selectedData);
    }
  }, [selectedData]);
  
  return (
    <div style={widthSize}>
      <div className="ct-select-group ct-js-select-group" style={heightSize}>
        <select
          className="ct-select ct-js-select"
          id={label}
          value={JSON.stringify(selectedData)}
          onChange={handelInputChange}
          style={withBorders}
        >
          {label && <option value={JSON.stringify({key: "", value: ""})}>{label}</option>}
          {payload.map((item, i) => (
            <option key={i} value={JSON.stringify(item)} title={item.value}>
              {item.value}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

标签： reactjs

解决方案

这可能是一个过时的关闭问题，您可以尝试以下方法：

const getSelectedStatus = ({ key }) => {
  setData((data) => {
    const actionStatusId = key;
    const selectedFilters = {
      ...data.selectedFilters,
      actionStatusId,
    };
    return { ...data, selectedFilters };
  });
};
const getSelectedCategory = ({ key }) => {
  setData((data) => {
    const actionCategoryId = key;
    const selectedFilters = {
      ...data.selectedFilters,
      actionCategoryId,
    };
    return { ...data, selectedFilters };
  });
};

推荐阅读