时间戳

首页 > 解决方案 > React TypeError：无法使用'in'运算符在null中搜索'length'

javascript - React TypeError：无法使用'in'运算符在null中搜索'length'

问题描述

我想访问一个本地数组文件，对其进行过滤，并将过滤后的数组存储为状态，最后将状态传递给子组件。

// array file

const originalData =
[ 
  { "ComName":"A", "SDGs":"1", "No":1 },
  { "ComName":"B", "SDGs":"2", "No":2 },
  ...
]

我使用getComany()andfilterCompany()来获取过滤后的数据，并将其存储filtredCompany为状态。但事实证明TypeError: Cannot use 'in' operator to search for 'length' in null。

// Services.js

export function getCompany() {
  const companyList = originalData;
  return companyList;
}

export function filterCompany(comType) {
  // filter detail

  let companyList = getCompany();
  let filtredMatchCompany = getCompany().filter(type => type.SDGs === comType && type.No == comType);
  let matchCom = _.map(filtredMatchCompany, 'ComName');
  let filtredCompany = companyList.filter((type)=> matchCom.includes(type.ComName))


// Filter.js

export default function Filter() {
  const [filtredCompany,setFiltredCompany] = useState(null);

  useEffect(() => {
    setFiltredCompany(getCompany());
  }, []);
  
  function handleD3(e) {
    let typeCompany = e.target.value;
    typeCompany !== "all"
      ? setFiltredCompany(filterCompany(typeCompany))
      : setFiltredCompany(getCompany()); 
  }

  const outputFilter = filtredCompany;

  return (
    <>
      {buttons &&
        buttons.map((type, series) => (
          <>
              <button key={series} value={type.no} onClick={handleD3}>
                  {type.name}
              </button>
          </>
        ))}
          <>
             <ObjectD3 outputFilter = {filtredCompany}/>
          </>
   </>
}

错误可能来自初始状态null。我尝试解决这个问题，并将初始状态更改为 const [filtredCompany,setFiltredCompany] = useState([]) . TypeError 不会发生，但 setState 即setFiltredCompany 不再起作用。

  const [filtredCompany,setFiltredCompany] = useState(null);
  console.log(filtredCompany)
  // *click button*
  // the filtred data I want


  const [filtredCompany,setFiltredCompany] = useState([]);
  console.log(filtredCompany)
  // *click button*
  // []

有谁知道如何处理这种情况或更好的想法来传递数据？非常感谢您的先进！

源代码在这里

标签： javascriptreactjs

解决方案

让我们在这里查看您的部分代码。

首先，对于 React 组件，生命周期方法按以下顺序执行：构造函数 -> 渲染 -> componentDidMount。

在Filter组件中，您正在设置初始状态，如下所示：

useEffect(() => {
   setFiltredCompany(getCompany());
}, []);

现在，要记住的一件事是所有的setState()函数和useEffect钩子都是异步的，也就是说，它们在将来的某个时间完成它们的执行。所以，当 React 渲染你的应用程序时，当ObjectD3组件被渲染时，useEffect钩子还没有执行，所以 ObjectD3 接收null作为 prop 和 ObjectD3 中的语句

this.dataset = this.props.outputFilter;

将 null 分配给数据集，从而给您错误。

一个更好的方法是在 ObjectD3 中实现另一个生命周期方法，名为 componentDidUpdate，您可以在其中比较 props 的变化，因为更新并采取必要的操作。

在此处检查代码的更新版本。

推荐阅读