reactjs - 从一个函数中获取值并将其传递给另一个函数

问题描述

我有一个名为 onDatabaseSelect 的函数，它检索数据库的值，如控制台中所示，具有给定的键属性名称和 Object_name 的值：“”。

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

预期输出：

因此，如果选中，则应该将 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", "]
}

更新错误：

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

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

标签： reactjs

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

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

databases并将映射的 UI 和对象名称数组中的数组传播到一个新数组中。您必须重命名解构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;
  });
};

reactjs - 从一个函数中获取值并将其传递给另一个函数

问题描述

解决方案

推荐阅读