从一个函数获取价值并将其传递给另一个函数

时间:2020-10-06 04:43:27

标签: reactjs

我在onDatabaseSelect上调用了一个函数,该函数使用给定的键属性名称和Object_name的值““”来检索数据库的值,如控制台中所示。

enter image description here

  const onDatabaseSelect = (e, value) => setDatabase(value)

  useEffect(() => {
    console.log("set database", database)
  }, [database])

在这里被称为

   <div style={{marginRight: '210px', width: '100%'}}>
              <AutoCompleteSingle
                name='Database'
                label='Database'
                options={autoComplete.databasesAutoComplete}
                onChange={autoComplete.onDatabaseAutoCompleteFieldUpdate}
                onSelect={onDatabaseSelect}
                uniqueIdentifier={1}
              />
            </div>

我需要将object_name的值推到新状态的返回值

  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
    })
  }

预期输出:

enter image description here

因此,如果已选中,则应将object_name推入数据库数组;如果未选中,则应将其删除。

所以如果我要检查onDatabaseSelect的值,它将是“ stg_successfactors”

新值应如下所示:

databaseArr = {
unit_test_id: 166.
databases["iagdcanonprod.auiag.corp/project_entrust_australia_dev", stg_successfactors.ext_gpload_reusable_e24181c8_f3ed_11ea_836b_fa163e5628e8", "]
}

更新错误: enter image description here

数据库状态存在于另一个组件中...我想知道我是否正确传递了道具?

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

1 个答案:

答案 0 :(得分:1)

您可以将databases状态数组映射到object_name个值的数组

databases.map(({ object_name }) => object_name)

并将databases数组从映射的UI和对象名称数组中传播到一个 new 数组中。您必须重命名已分解的databases函数参数,以避免名称与组件状态冲突。

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