как обрабатывать ссылку на массив после получения данных при реагировании? - PullRequest
Новая
       32

как обрабатывать ссылку на массив после получения данных при реагировании?

0 голосов
/ 01 августа 2020

Код ниже - это простой useEffect, который запускает код для изменения переменной channel после завершения результата asyn c функции. Когда переменная установлена, я просто не могу достичь: channelResult.result.items[0].contentDetails.relatedPlaylists.uploads, потому что он нарушает доступ к массиву ...

поэтому я могу сделать: channelResult.result result: {}

I может делать: channelResult.result.items result: [{}]

но не: channelResult.result.items[0] result: error

  export default function YoutubeForm() {
  const [ytId, setYtId] = useState("");
  const [checked, setCheck] = useState(false);

  const [channel, setChannel] = useState({ result: {} });
  const [upload, setUpload] = useState("");

  const channelId = "UCwZmL_QQEnAerrgCDm5pV-Q";

  

useEffect(() => {
    let items = channel.result.items; // result: [{...}]
    let items = channel.result.items[0]; // result: TypeError: Cannot read property '0' of undefined

    // setUpload(channelResult.result.items[0].contentDetails.relatedPlaylists.uploads);
  }, [channel]);

  useEffect(() => {
    console.log(upload);
  }, [upload]);

  const handleYtIdOnChange = (e) => {
    const value = e.target.value;
    // debounce effect
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => setYtId(value), 1000);
  };
// this function fire when user press a button, 
// the function resolves a get from youtube 
// server and sets its value on useState of setChannel
  const checkYdId = () => {
    return getChannelUploads(channelId).then((res) => setChannel(res));
  };

  return (
    <React.Fragment>
      <Typography variant="h6" gutterBottom>
        Youtube
      </Typography>
      <Grid container spacing={3}>
        <Grid container direction="row" justify="center">
          <TextField
            required
            id="cardName"
            label="ID do canal"
            onChange={handleYtIdOnChange}
            value={channelId}
          />
          <Button color="primary" variant="outlined" onClick={checkYdId}>
            Check
          </Button>
        </Grid>
        <div style={{ maxHeight: "300px", width: "100%", overflow: "scroll" }}>
          <Grid item>{checked ? <List /> : null}</Grid>
        </div>
      </Grid>
    </React.Fragment>
  );
}

как обрабатывать этот ссылочный доступ?

1 Ответ

0 голосов
/ 02 августа 2020

Я нашел ответ:

просто приведенный ниже код в useEffect 

if (items instanceof Array) {
      setUpload(items[0].contentDetails.relatedPlaylists.uploads);
    }
...