React如何提取表单输入值提交后传给子组件作为prop调用第三方API

你观察到的子组件每次输入都接收prop的现象，本质是父组件input状态更新触发父组件整体重渲染，子组件随之被动重渲染，此时传入的saveState实际并未发生变化，并不是prop主动更新导致的。 #

方案1：基础实现（满足大部分场景） #

1. 子组件使用useEffect监听传入的内容状态，仅当有有效提交内容时触发请求
2. 用React.memo包裹子组件，避免不必要的重渲染

修改后的子组件代码：

import React, { useEffect } from 'react'
import axios from 'axios'

// 用React.memo包裹，仅当prop发生变化时才重渲染
const DisplayData = React.memo((props) => {
  const inputContent = props.saveState

  useEffect(() => {
    // 过滤初始空值，仅提交后有有效内容时才发起请求
    if (inputContent.trim()) {
      // 处理食材字符串格式
      const processedIngredients = inputContent.trim().replace(/,/gi, '').split(' ').join(',+')
      // 发起GET请求
      axios.get('你的API接口地址', {
        params: {
          ingredients: processedIngredients
        }
      }).then(res => {
        // 此处处理接口返回的结果逻辑
        console.log('食材查询结果：', res)
      }).catch(err => {
        console.error('请求失败：', err)
      })
    }
  }, [inputContent]) // 仅当传入的内容变化时触发该副作用

  return (
    <div>
      {/* 此处渲染你需要展示的结果内容 */}
    </div>
  )
})

export default DisplayData

方案2：支持重复提交相同内容 #

如果需要支持用户两次输入相同内容提交都能触发新的请求，可以调整父组件的状态结构，新增提交计数标记：

修改后的父组件代码：

import React from 'react'
import { useState } from 'react'
import ManipulateData from './ManipulateData'

function Input() {
  const [input, setInput] = useState('')
  // 用对象存储提交内容和计数，计数每次提交自增，保证即使内容相同也能触发prop变化
  const [submitInfo, setSubmitInfo] = useState({
    content: '',
    submitTimes: 0
  })

  const handleChange = (e) => {
    setInput(e.target.value);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    // 空内容不触发提交
    if (!input.trim()) return
    setSubmitInfo(prev => ({
      content: input,
      submitTimes: prev.submitTimes + 1
    }))
    setInput('');
  }

  return (
    <div>
      <div className="pantryInput">
        <form onSubmit={handleSubmit} className="pantryForm">
          <label>输入你晚餐可用的食材</label>
          <input value={input} onChange={handleChange} type='text' placeholder="你的储藏室里有什么？" />
          <button type="submit">查询</button>
        </form>
      </div>
      <ManipulateData submitInfo={submitInfo} />
    </div>
  )
}

export default Input

对应子组件修改：

useEffect(() => {
  const inputContent = props.submitInfo.content
  if (inputContent.trim()) {
    // 同上的请求逻辑
  }
// 监听提交计数，每次提交都会触发
}, [props.submitInfo.submitTimes])

内容的提问来源于stack exchange，提问作者Alexander Ambrose