时间戳

首页 > 解决方案 > 如何将状态附加到另一个状态反应

reactjs - 如何将状态附加到另一个状态反应

问题描述

我有一个名为 database 的状态变量，它返回一个对象和一个包含数据库名称的数组，如下所示，它是一个下拉菜单。我希望能够从数据库状态数组中获取值（object_name），并将它们从 addToProduction 函数附加到数据库数组的末尾。数据库状态变量也存在于另一个组件中。

这是从数据库状态变量返回的数据：

在此处输入图像描述

这是来自 addToProduction 函数的数据：

在此处输入图像描述

这是函数addtoduction ....检查复选框时，它会添加或将值删除到生产Databasestate：

  const [productionDatabaseData, setProductionDatabaseData] = useState([])

const addToProduction = ({ target }, { id, databases }) => {

    setProductionDatabaseData((previousState) => {

      let newState = [...previousState]
      if (target.checked) {
        newState = [
          ...newState,
         {  unit_test_id: id, databases }
        ]
      } else {
        const i = newState.findIndex(({ unit_test_id }) => unit_test_id === id)
        if (i !== -1) newState.splice(i, 1)
      }
      return newState
    })
  }

  useEffect(() => {
    console.log("databaseArr", productionDatabaseData);
  }, [productionDatabaseData]);

我的预期输出应该是：

数据库Arr：

在此处输入图像描述

本质上，数据库状态数组被附加到 databaseArr 的末尾。

更新代码：

  const addToProduction = ({ target }, { id, databases }) => {
  
      setProductionDatabaseData((previousState) => {
  
        let newState = [...previousState]
        if (target.checked) {
          newState = [
            ...newState,
           {  unit_test_id: id, databases }
          ]
        } else {
          const i = newState.findIndex(({ unit_test_id }) => unit_test_id === id)
          if (i !== -1) newState.splice(i, 1)
        }
        return newState
      })
      const appendedArrays = [productionDatabaseData, ...props.database.recent_objects_modified_by_user.map(({object_name}) => object_name)]

      useEffect(() => {
        console.log("databaseArr", appendedArrays);
      }, [productionDatabaseData, appendedArrays]);
  
    }

更新 v2：

  const [addRemoveDatabase, setAddRemoveDatabase] = useState('prod.auiag.corp/iadpprod')

标签： reactjs

解决方案

我无法弄清楚数据的存储位置，但假设它是状态变量recent_objects_modified_by_user，您可以执行以下操作：database

const appendedArrays = [productionDatabaseData, ...database.recent_objects_modified_by_user.map(({object_name}) => object_name)]

这是通过使用扩展运算符来实现的（参考这里）

推荐阅读