Javascript React-api数据已成功传递给组件（每个检查器），但未呈现

api数据正在成功地从api调用传递到表组件，但未呈现

如果在搜索播放列表后，我进入并编辑table.js文件，数据将正确呈现。 App.js

const App = (props) => {
  const [playlists, setPlaylists] = useState([])
  const [searchString, setSearchString] = useState() //use instead of onsubmit 
  const isFirstRef = useRef(true);
  
  const search = (value) => {
    setSearchString(value)
  }

  useEffect(
    () => {
      if (isFirstRef.current) {
      isFirstRef.current = false;
      return;
      }
      let spotlist = Spotify.playlistsearch(searchString)
      let tablelist = []
      spotlist.then(val =>{
        val.forEach(element =>{
          tablelist.push(
            { 
              name: element.description,
              track_count: element.tracks.total,
            })
        } 
      )})
      setPlaylists(tablelist)
      }, [searchString] );

  return (
    <div className="App">
      <Searchform search={search}/>
      <Table playlists={playlists}/>
    </div>
  )
};

const-App=（道具）=>{
const[playlists，setPlaylists]=useState（[]）
const[searchString，setSearchString]=useState（）//使用而不是onsubmit
const isFirstRef=useRef（true）；
常量搜索=（值）=>{
设置搜索字符串（值）
}
使用效果(
() => {
如果（isFirstRef.当前）{
isFirstRef.current=假；
返回；
}
让spotlist=Spotify.playlysearch（searchString）
让tablelist=[]
spotlist.then（val=>{
val.forEach（元素=>{
tablelist.push(
{ 
名称：element.description，
轨道计数：element.tracks.total，
})
} 
)})
设置播放列表（表格列表）
}，[searchString]）；
返回(
)
};

播放列表道具在播放列表组件检查器下显示为存在，但不呈现。如果在查看组件检查器中的数据后编辑文件，则可以获取要渲染的数据。 Table.js

从“React”导入React
从“语义ui”导入{图标、标签、菜单、表格}
常量播放列表=（{playlists}）=>{
返回(
播放列表
轨道计数
{playlists.map（（playlist）=>{
返回(
{playlist.name}
{playlist.track_count}
)
}
)
}
1.
2.
3.
4.
)
}
导出默认播放列表

我要注意的第一点是，除非searchString在依赖项数组中发生更改，否则不会触发使用效果。此外，我相信您的第一个ref条件会阻止第一次渲染的设置，因此可能会导致问题

也许最好看看以前的检查，我以前在这里使用过公共钩子的解决方案：

当你说播放列表道具出现时，有实际值吗

在其他编辑中，确保map的返回值具有正确的键：

Issue 您可能正在接收正确的数据，但没有在正确的时间更新状态

spotlist

返回要从中链接的承诺，但是

setPlaylists（tablelist）

调用在处理承诺链的

块之前排队。
useffect
回调是100%同步代码

let spotlist = Spotify.playlistsearch(searchString);
let tablelist = [];
spotlist.then(val => { // <-- (1) then callback is placed in the event queue
  val.forEach(element => { // <-- (3) callback is processed, tablelist updated
    tablelist.push({ 
      name: element.description,
      track_count: element.tracks.total,
    });
  } 
)});
setPlaylists(tablelist); // <-- (2) state update enqueued, tablelist = []

let spotlist = Spotify.playlistsearch(searchString);
let tablelist = [];
spotlist.then(val => { // <-- (1) then callback is placed in the event queue
  val.forEach(element => { // <-- (3) callback is processed, tablelist updated
    tablelist.push({ 
      name: element.description,
      track_count: element.tracks.total,
    });
  } 
)});
setPlaylists(tablelist); // <-- (2) state update enqueued, tablelist = []

Spotify.playlistsearch(searchString)
  .then(val => {
    setPlaylists(val.map(element => ({
      name: element.description,
      track_count: element.tracks.total,
    })));
  } 
)});