Проблема с хуками: useEffect, useMutation и useState работают вместе - PullRequest
Новая
       21

Проблема с хуками: useEffect, useMutation и useState работают вместе

0 голосов
/ 30 сентября 2019

У меня есть функция, которая использует react-table в качестве сетки данных. Первоначально он заполняется из Apollo в родительском компоненте через локальное состояние, где каждая строка в сетке является объектом в массиве.

Когда происходят изменения в ячейке сетки, весь объект линии записывается в состояние.

Я пытаюсь использовать useEffect для запуска мутации, которая записывает эти изменения состояния обратно в базу данных, но я борюсь с двумя основными вещами:

  • мутация не записываетобратно в базу данных (хотя мутация работает на площадке graphql)
  • понимание того, как отправить только измененную строку обратно в мутацию.

Основная функция (часть) 

function Table2({ columns, data }) {
  const [lines, setLines] = useState(data);
  const [updateLine, {loading, error }] = useMutation(UPDATE_ITEM_MUTATION, {
  variables:{ ...lines}
  });

  useEffect(() => {
    updateLine
  },[lines]);

  const updateMyData = (rowIndex, columnID, value) => {
    setLines(getLines =>
      getLines.map((row, index) => {
        if (index === rowIndex) {
          console.log(row)
          return {
            ...lines[rowIndex],
            [columnID]: value
          };
        }
        return row;

      })
    );
  };

и мутация ... 

const UPDATE_ITEM_MUTATION = gql`
mutation UPDATE_LINE_MUTATION(
  $id: ID!, 
  $description: String, 
  $project:Int
  $category:Int
  $account:Int
  $amt:Int
  $units:String
  $multiple:Int
  $rate:Int
  ){
  updateLine(
    where:{id: $id},
    data: {
    description: $description
    project: $project
    category: $category
    account: $account
    amt: $amt
    units: $units
    multiple: $multiple
    rate: $rate
    }) {
    id
    description
    amt
  }
}
`

Буду очень признателен за несколько советов. Спасибо

1 Ответ

1 голос
/ 30 сентября 2019

Я не думаю, что вам нужно использовать useEffect, вы можете вызвать мутацию в своем обновлении: 

function Table2 ({ columns, data }) {
  const [lines, setLines] = useState(data)
  const [updateLine, { loading, error }] = useMutation(UPDATE_ITEM_MUTATION)

  const updateMyData = (rowIndex, columnID, value) => {
    const updatedLine = { ...lines[rowIndex], [columnID]: value }
    updateLine({ variables: { ...updatedLine } })
    setLines(getLines => getLines.map((row, index) => (index === rowIndex ? updatedLine : row)))
  }
}

Если вы действительно хотите использовать useEffect, вы можетенапример, сохранить последнюю измененную строку в переменной состояния, а затем использовать ее для запуска обновления: 

function Table2 ({ columns, data }) {
  const [lines, setLines] = useState(data)
  const [updateLine, { loading, error }] = useMutation(UPDATE_ITEM_MUTATION)
  const [updatedLine, setUpdatedLine] = useEffect(null);
  useEffect(()=>{
     // call your mutation
  }, [updatedLine]);
  const updateMyData = (rowIndex, columnID, value) => {
    const updatedLine = { ...lines[rowIndex], [columnID]: value }
    setUpdatedLine(updatedLine);
    updateLine({ variables: { ...updatedLine } })
    setLines(getLines => getLines.map((row, index) => (index === rowIndex ? updatedLine : row)))
  }
}
...