React中更新数组后为何需提交两次才能让映射函数展示更新状态？

问题症状 #

• 首次提交搜索时，图片无法展示，需提交两次才能显示
• 修改输入值并提交后，新增的内容是旧值，再次提交才会更新为新的搜索结果

问题原因 #

1. React状态更新的异步特性：点击按钮时，getImg()发起请求后立刻执行setImgArr，但setheimg是异步更新状态的操作，此时theimg还是旧的状态值，导致第一次添加到数组的是无效/旧数据，第二次提交时才会用上一次的正确数据。
2. Form组件的value绑定错误：Ingredients组件中给Form传递value={form.value}，但form是字符串类型的状态，并非对象，导致输入框无法正确绑定值。

修复方案 #

1. 调整数据添加逻辑：在getImg的请求成功回调中，直接将新获取的图片对象添加到imgArr，无需借助中间状态theimg，避免异步状态更新带来的时序问题。
2. 修正Form的value绑定：将Form组件的value属性改为直接传递form状态。

修复后的代码 #

Ingredients组件

export default function Ingredients() {
  const [form, setForm] = useState("");
  const [imgArr, setImgArr] = useState([]);

  function handleChange(e) {
    setForm(e.target.value);
  }

  function getImg() {
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": "29a63a7413msh8378b61a2e11cf3p192e62jsn53d83f1651fe",
        "X-RapidAPI-Host": "edamam-food-and-grocery-database.p.rapidapi.com",
      },
    };
    fetch(
      `https://edamam-food-and-grocery-database.p.rapidapi.com/parser?ingr=${form}`,
      options
    )
      .then((response) => response.json())
      .then((response) => {
        // 直接创建新的图片对象并添加到数组
        const newImg = {
          name: form,
          url: response.parsed[0].food.image,
          id: Math.random(),
        };
        setImgArr(oldArray => [...oldArray, newImg]);
      })
      .catch((err) => console.error(err));
  }

  const thingsElements = imgArr.map((thing) => (
    <div key={thing.id}>
      <img src={thing.url} />
      <p>{thing.name}</p>
    </div>
  ));

  return (
    <>
      <Navbar page="/" />
      <Heading heading="Ingredients" info="Search by etc" />
      <Form
        label="Search Ingredients..."
        onChange={handleChange}
        value={form} // 修正value绑定
      />
      <button onClick={getImg}>Search</button>
      {thingsElements}
    </>
  );
}

Form组件

const Form = (props) => {
  return (
    <>
      <label>
        {props.label}
        <input value={props.value} onChange={props.onChange} />
      </label>
    </>
  );
};
export default Form;

额外优化建议 #

• Math.random()生成id存在重复风险，建议使用更可靠的唯一id生成方式（如uuid库）
• 添加加载状态，避免用户重复点击按钮
• 处理API请求失败的情况（如提示用户搜索失败）

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