Question

当路径更改并更新filesList状态时，我正在尝试更新此组件。

但是，由于useState被取消，该组件仅在我第二次单击时更新。

更新此状态的最佳方法是什么，使其一键单击即可将新的文件夹从保存在filesList中的保管箱中重新出租给新文件夹？

pathUpdateHandler用于获取单击的文件夹的路径，然后更改path请求中使用的post，以更新路径状态。

const DropBoxChooser = props => {
    const [filesList, setFilesList] = useState([]);
    const [thumbBase64, setThumbBase64] = useState([]);
    const [loader, setLoader] = useState(false);
    const [previewImage, setPreviewImage] = useState("/Customers");
    const [path, setPath] = useState('/customers');

    const requestConfig = {
        headers: {
            Authorization: `Bearer ${config.dropbox_api_key}`,
            'Content-Type': 'application/json',
        },
    };

    const previewRequestConfig = {
        headers: {
            Authorization: `Bearer ${config.dropbox_api_key}`,
            'Content-Type': 'application/octet-stream',
            'Dropbox-API-Arg': `{"path": "${previewImage}"}`
        },
    };

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

    const loadimages = () => {
        setLoader(true);
        axios.post('https://api.dropboxapi.com/2/files/list_folder', {path}, requestConfig)
        .then(res => {
            setFilesList(res.data.entries);
            setLoader(false);
        });
    }

    const viewableFile = () => {
        console.log(Object.values(filesList).indexOf('file') > -1 ? 'true' : 'false');
        // let thumbs = {
        //     entries: []
        // };

        // filesList.forEach(path => {
        //     thumbs.entries.push({path: path.path_lower})
        // });
        // setThumbList(thumbs);

        // axios.post('https://content.dropboxapi.com/2/files/get_thumbnail_batch', thumbList, requestConfig)
        // .then(res => {
        //     setThumbBase64(res.data.entries)
        // });
    }

    const pathUpdateHandler = (customerPath) => {
        setPath(customerPath);
        console.log(path);
        axios.post('https://api.dropboxapi.com/2/files/list_folder', {path}, requestConfig)
        .then(res => {
            setFilesList(res.data.entries);
            setLoader(false);
            viewableFile();
            console.log(filesList);
        })
    }

    const getImagePreview = () => {
        axios.post('https://content.dropboxapi.com/2/files/get_preview', null, previewRequestConfig)
        .then(res => setPreviewImage(res.data))
    }

    return (
        <Fragment>
            <div>
                <Button onClick={loadimages}>Click Me!</Button>
                {loader === true ?
                    <h1>Loading...</h1>
                :
                filesList.map((customer) => (
                    <Button onClick={customer['.tag'] === 'folder' ?
                        () => {
                            pathUpdateHandler(customer.path_lower)
                        } : null}
                    >
                        {customer['.tag'] === 'file'
                            ? thumbBase64.map(item =>
                                <img
                                    src={`data:image/jpeg+xml;base64,${item.thumbnail}`}
                                    alt="" onClick={getImagePreview}
                                />)
                            : null
                        }
                        {customer.name}
                    </Button>
                ))}
            </div>
        </Fragment>
    )
}

export default DropBoxChooser;

谢谢！

Answer 1

您应将cutomerPath传递给api调用

const pathUpdateHandler = customerPath => {
  setPath(customerPath);
  console.log(path);
  axios
    .post(
      "https://api.dropboxapi.com/2/files/list_folder",
      { customerPath },
      requestConfig
    )
    .then(res => {
      setFilesList(res.data.entries);
      setLoader(false);
      viewableFile();
      console.log(filesList);
    });
};

React状态更新仅在第二次单击时重新呈现-异步数据

1 个答案: