React开发中如何移除数组内的'null'字符串元素？

调用后端接口获取语言配置数据时，接口返回1项默认语言，剩余2项语言字段为可选返回字段，需要对返回的字段值通过split("-")拆分提取语言名称字符串，当前接口请求逻辑代码如下：

useEffect(() => {
    axios
      .get('api')
      .then((response) => {
        console.log(response.data);
        setLanguage([...language, response.data.data.LANGUAGE1_NAME.split("-")[1], response?.data?.data?.LANGUAGE2_NAME == undefined ? 'null' : response.data.data.LANGUAGE2_NAME.split("-")[1], response?.data?.data?.LANGUAGE3_NAME == undefined ? 'null' : response.data.data.LANGUAGE3_NAME.split("-")[1]])
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

现有逻辑存在缺陷：传递给子组件的language数组在可选字段未返回的场景下，会生成["English", "null", "null"]这类包含字符串'null'的结构。之前尝试在input的value属性中加判断、调用pop()方法处理，对应代码如下：

<div>
  <input
     type="text"
     value={language == 'null' ? language.pop() : language}
     onChange={(event) => handleItemChanged(event, i)}
     placeholder="Language"
  />
</div>                   

该方案无法正常生效，需要正确实现数组内'null'字符串元素的移除。

• 判断逻辑不成立：language本身是数组类型，永远不可能和字符串'null'相等，判断分支永远不会触发
• 方法使用错误：pop()只会删除数组最后一位元素，无法移除所有位置的'null'值，且pop()会直接修改原数组，违反React状态不可变原则
• 渲染阶段修改原数组会触发意外重渲染，导致组件行为异常

优先在接口数据处理阶段就过滤掉无效值，从源头避免脏数据流入组件渲染流程，不要等数据传到子组件渲染时再做兜底处理。
优化后的接口请求代码如下：

useEffect(() => {
  axios
    .get('api')
    .then((response) => {
      const { LANGUAGE1_NAME, LANGUAGE2_NAME, LANGUAGE3_NAME } = response.data.data;
      // 统一收集三个语言字段，过滤空值后做拆分提取
      const validLanguageList = [LANGUAGE1_NAME, LANGUAGE2_NAME, LANGUAGE3_NAME]
        .filter(langField => typeof langField === 'string' && langField.length > 0)
        .map(langStr => langStr.split("-")[1])
        .filter(langName => Boolean(langName));
      // 原代码写的[...language, ...]会导致每次组件重跑useEffect时重复追加语言数据，初始化请求直接替换数组值即可
      setLanguage(validLanguageList);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

如果有特殊限制必须在子组件渲染阶段处理，不要在渲染过程中修改原数组，用filter方法生成过滤后的新数组，再遍历渲染输入框即可，示例代码如下：

<div>
  {language
    .filter(langItem => langItem !== 'null')
    .map((langItem, i) => (
      <input
        key={`lang-${i}`}
        type="text"
        value={langItem}
        onChange={(event) => handleItemChanged(event, i)}
        placeholder="Language"
      />
    ))
  }
</div>

注意：遍历渲染列表项时需要给元素绑定唯一的key属性，固定静态列表可临时用索引作为key，存在增删、排序操作的列表要使用业务唯一id作为key，避免渲染错位问题。不要在JSX渲染执行过程中直接调用会修改原状态数组的方法（如pop、splice、push等），所有状态修改都要通过set方法传入新值完成。

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