(Material-table)无法将我的选项列表提取到 table 列的查找字段

Question

目前，我有一个这样的useEffect代码，试图从axios get请求中获取我的预设选项并将其发送到table列的查找字段

  const [optionList, setOptionList] = useState({});


  const [columns, setColumns] = useState({
    columns: [
      {
        title: 'Image_ID',
        field: 'image_ID',
        lookup: optionList,
      },
    ]
  });

  useEffect(() => {
    const getOption = async () => {
      let data = [];
      let options = {};
      const response = await axios.get(sampleUrl);
      const { data: { image_sample } } = response;
      image_sample.map((item) => {
        data.push(item.image_ID);
      });
      data.forEach(item => options[item] = item);
      setOptionList(JSON.stringify(options));
    }
    getOption();
  }, [])

控制台中一切顺利，我的 optionList 看起来正是我想要的： {"p01":"p01","p02":"p02","p03":"p03"} 但是，table 选项仍然是空的。但是如果你像这样直接手动将 optionList 提取到列中：

  const [columns, setColumns] = useState({
    columns: [
      {
        title: 'Image_ID',
        field: 'image_ID',
        lookup: {"p01":"p01","p02":"p02","p03":"p03"},
      },
    ]
  });

出于某种原因它会起作用。在某些时候，我怀疑 optionList 在我的 useEffect 被安装之前已经被发送到 table。有人知道发生了什么事吗？

Answer 1

因为 columns.columns[0].lookup 状态的初始化已由 optionList 的值设置。在第一个渲染中，此状态收到 {} 直到 useEffect 调用，在 useEffect 内部调用 setOptionList 以更改选项列表状态，optionList 已更改但列状态未更改导致此组件未 re-render 来展示你想看到的。

如果你想修复它，只需添加 useEffect 依赖项包括 optionList 并具有函数 setColumns:

const [optionList, setOptionList] = useState({});


  const [columns, setColumns] = useState({
    columns: [
      {
        title: 'Image_ID',
        field: 'image_ID',
        lookup: optionList,
      },
    ]
  });

  useEffect(() => {
    const getOption = async () => {
      let data = [];
      let options = {};
      const response = await axios.get(sampleUrl);
      const { data: { image_sample } } = response;
      image_sample.map((item) => {
        data.push(item.image_ID);
      });
      data.forEach(item => options[item] = item);
      setOptionList(JSON.stringify(options));
    }
    getOption();
  }, [])

  useEffect(() => {  // <== Add this useEffect
    setColumns({
     columns: [
      {
       title: 'Image_ID',
       field: 'image_ID',
       lookup: optionList,
      },
     ]
   }) 
  }, [optionList])

(Material-table)无法将我的选项列表提取到 table 列的查找字段

(Material-table)Unable to fetch my option list to lookup field of the table column

reactjs

material-ui

axios