reactjs - 如何创建对象的唯一实例

Question

我触发了一个名为 onEditScheduleClick 的 onclick，这会设置一个一切正常的对象，但是当我单击不同行上的编辑按钮时，props.setScheduleFieldData 中的数据会被覆盖。

当我单击编辑按钮时，70 也会显示 70，并且它将具有与 ID 156 相同的数据库名称。

如您所见，当我点击编辑按钮时，数据记录良好。我想我可能需要为每一行创建一个唯一的实例？有人可以帮帮我吗！

时间表

const schedules = () => {
  const autoComplete = useContext(AutoCompleteContext)
  const snackbar = useContext(SnackbarContext)
  const loading = useContext(LoadingContext)
  const user = useContext(UserContext)

  const [scheduleData, setScheduleData] = useState([])
  const [showScheduleModal, setShowScheduleModal] = useState(false)
  const [scheduleFieldData, setScheduleFieldData] = useState({})
  const [database, setDatabase] = useState('')

  useEffect(() => {
    async function onLoadScheduleData(){
      loading.setLoading(true)
      const [results, projectResults,databaseAutoCompleteResults] = await Promise.all([
        get('get_testing_schedules', user.user),
        get('get_projects_autocomplete/b', user.user),
        get('get_databases_autocomplete/a', user.user)

      ])
      autoComplete.setProjectsAutoComplete(projectResults)
      autoComplete.setDatabasesAutoComplete(databaseAutoCompleteResults)

      setScheduleData(results.data)
      loading.setLoading(false)
    }
    onLoadScheduleData()
  }, [])

  const sortedScheduleData = [].concat(scheduleData)
    .sort((a, b) => a.id < b.id ? 1 : -1)

  const showModal = () => {
    setShowScheduleModal(true)
    setScheduleFieldData({})
  }

  const onCloseScheduleModal = () => setShowScheduleModal(false)

  const onScheduleFieldUpdate =  (e, valueFromAutoComplete, nameFromAutoComplete) => {
    const name = nameFromAutoComplete ? nameFromAutoComplete
    : e.target.name || e.target.getAttribute('name')
    const value = valueFromAutoComplete ?  valueFromAutoComplete.map(val => val.value).join(',')
    : e.target.innerText ? e.target.innerText
    : e.target.value

    setScheduleFieldData({...scheduleFieldData, ...{[name]: value}})

    console.log(name)

  }


  const onDatabaseSelect = async (e, value) => {
    autoComplete.onDatabaseAutoCompleteFieldUpdate(e)
    const name = e.target.getAttribute('name')
    console.log(name)
    setDatabase(value)
    setScheduleFieldData({...scheduleFieldData, ...{[name]: value}})

  }

  console.log(scheduleFieldData, 'scheduleFieldData');

  const onSubmitTestingScheduleClick = async () => {
    loading.setLoading(true)
    const results = await verifiedPost('post_testing_schedule', scheduleFieldData, user.user)
    if (results.status === 0) {
      setShowScheduleModal(false)
      setScheduleFieldData({})
      setScheduleData(results.data)
    } else if(results.status >= 20 && results.status <= 30) {
      user.setSessionTokenMatches(false)
    }
    snackbar.statusCheck(results)
    loading.setLoading(false)
  }

  return (!scheduleData ? null :
    <PageWrapper title='Schedules'>

      <div style={{marginBottom: '20px'}}>
        <Button
          onClick={showModal}
          className='Button Dark Main'
          text='CREATE SCHEDULE'
        />
      </div>

      <div className='Card'>
        <div className='TableTopbar ScheduleGrid'>
          <div>ID</div>
          <div>Interval</div>
          <div>Project ID</div>
          <div>Database</div>
          <div>Create Timestamp</div>
          <div>Create User Id</div>
          <div>Edit</div>
        </div>

        {sortedScheduleData.map(schedule =>
          <ScheduleDataRow
            key={schedule.id}
            schedule={schedule}
            setScheduleData={setScheduleData}
            onScheduleFieldUpdate={onScheduleFieldUpdate}
            setScheduleFieldData={setScheduleFieldData}
            scheduleFieldData={scheduleFieldData}
            onDatabaseSelect={onDatabaseSelect}
      
          />
        )}
      </div>

      <ScheduleModal
        showScheduleModal={showScheduleModal}
        onCloseScheduleModal={onCloseScheduleModal}
        onScheduleFieldUpdate={onScheduleFieldUpdate}
        scheduleFieldData={scheduleFieldData}
        onSubmitTestingScheduleClick={onSubmitTestingScheduleClick}
        scheduleFieldData={scheduleFieldData}
        // onFieldUpdate={onFieldUpdate}
        onDatabaseSelect={onDatabaseSelect}
        database={database}

       />
    </PageWrapper>
  )
}

export default schedules

计划数据行：

const scheduleDataRow = props => {
  const testing = useContext(TestingFrameworkContext)
  const autoComplete = useContext(AutoCompleteContext)
  const snackbar = useContext(SnackbarContext)
  const loading = useContext(LoadingContext)
  const user = useContext(UserContext)

  const [usageMode, setUsageMode] = useState('Read')


  const onEditScheduleClick = () => {
    props.setScheduleFieldData({
      'id': props.schedule.id,
      'interval': props.schedule.interval,
      'project_id': props.schedule.project_id,
      'database': props.schedule.database.toString(),
    })
    setUsageMode('Edit')
  }

  const onSubmitTestingScheduleClick = async () => {
    loading.setLoading(true)
    const results = await verifiedPost('post_testing_schedule', props.scheduleFieldData, user.user)
    if (results.status === 0) {
     props.setScheduleData(results.data)
     setUsageMode('Read')
    } else if(results.status >= 20 && results.status <= 30) {
      user.setSessionTokenMatches(false)
    }
    snackbar.statusCheck(results)
    loading.setLoading(false)
  }

  const onCancelEditScheduleClick = () => setUsageMode('Read')

  const getPartialDatabase = (database) => {
    const split = database.split('::')
    return split[split.length - 1]
  }


  return (
    <div className='Table ScheduleGrid'>

      {usageMode === 'Read' ?
        <React.Fragment>
          <div>{props.schedule.id}</div>
          <div>{props.schedule.interval}</div>
          <div>{props.schedule.project_id}</div>
          <div>{getPartialDatabase(props.schedule.database)}</div>
          <div>{props.schedule.create_timestamp}</div>
          <div>{props.schedule.create_user_id}</div>
          <div>
            <EditIcon
              style={{padding: '2px', width: '0.8em', height: '0.8em', marginRight: '5px'}}
              className='CircleButton'
              onClick={onEditScheduleClick}
            />
          </div>
        </React.Fragment>

        :


        <React.Fragment>
          <div>{props.schedule.id}</div>

          {configs.map((config, k) => {
            const Field = config.field
            return (
              <div key={config.name} className='Main'>
                <Field
                  uniqueIdentifier={config.name}
                  placeholder={config.label}
                  name={config.name}
                  uniqueIdentifier={k}
                  onChange={props.onScheduleFieldUpdate}
                  onSelect={props.onScheduleFieldUpdate}
                  onAutoCompleteOnChange={autoComplete.onProjectAutoCompleteFieldUpdate}
                  options={config.name === 'project_id'  ? autoComplete.projectsAutoComplete : config.name === 'database' ? autoComplete.databasesAutoComplete : config.options}
                  value={props.scheduleFieldData[config.name]}
                  initialValues={
                  props.scheduleFieldData[config.name].split(',').filter(x => x).map(x => ({label: x, value: x}))
                  }
                />
              </div>
            )
          })}

          <div><AutoCompleteSingle
            name='database'
            label='Database'
            options={autoComplete.databasesAutoComplete}
            onChange={autoComplete.onDatabaseAutoCompleteFieldUpdate}
            onSelect={props.onDatabaseSelect}
            initialValue={props.scheduleFieldData['database']}
            uniqueIdentifier={1}
            triggerOnSelectOnBackspace
          /></div>

          <div>{props.schedule.create_timestamp}</div>
          <div>{props.schedule.create_user_id}</div>

          <div style={{display: 'flex', alignItems: 'flex-start'}}>
            <div>
              <Button
                style={{marginRight: '10px'}}
                text='Submit'
                disabled={false}
                className='Button Dark Main'
                onClick={onSubmitTestingScheduleClick}
              />
            </div>
            <div>
              <Button
                text='Cancel'
                className='Button Dark Main'
                onClick={onCancelEditScheduleClick}
              />
            </div>
          </div>
        </React.Fragment>
      }
    </div>
  )
}

scheduleDataRow.propTypes = {
  schedule: PropTypes.object,
  setScheduleData: PropTypes.func
}

export default scheduleDataRow

标签： reactjsreact-hooks